zoukankan      html  css  js  c++  java
  • 有趣的浮动清除

      在写css的时候,浮动清除是必不可少的。大多数时候可以借助后面的元素清除浮动,有些时候也要引入额外的标签,我常用的就是<br/>和<span/>。但是今天发现一个有趣的问题。

      我想要的最终效果是

    html的结构是这样的:

    html结构
    <div class="warp">
        
    <div class="floated">floated</div>
        
    <div class="floated">floated</div>
        
    <div class="floated">floated</div>
        
    <div class="floated">floated</div>
        
    <div class="floated">floated</div>
    </div>

    <div style="960px; height:100px; background:#6F0; margin:0 auto;">
        
    <href="javascript:void(0);">test</a>
    </div>

    我对warp和floated简单的设置了样式,其中floated设置了float:left,为了方便观察还使用红色背景

     

    *{
        margin
    :0;
        padding
    :0;
        
    }
    .warp
    {
        width
    :960px;
        height
    :auto;
        margin
    :0 auto;
        
    }
    .floated
    {
        width
    :100px;
        height
    :100px;
        margin
    :5px;
        float
    :left;
        background
    :#F00;
        
    }

    注意上面的代码没有清除浮动,在ie6下是勉强可以显示正常的(margin-bottom没有了!):

    在ff下肯定是不行的(这也违背了标准):

    之后我使用span进行浮动清理(为了方便观察我使用 background:#666):注意display:none

    <span style="clear:both; display:none; height:0; font-size:1px; line-height: 0px; background:#666;" />

    这时,有趣的事情发生了!ie下:浮动后面的元素不见了!

    ff下和没有清除浮动前事一样的。之后我把span换成了br。消失的元素出现了。不管在ie还是在ff下和没有清除浮动是一样的。也就是说,这没有起到作用。

    接下来,还是使用span,换成display:block; 有趣的现象又出现了:用于清除浮动的span元素的显示面积和浮动后面的元素一摸一样,而且,里面的链接也不知去向。

    而这样在ff下是完全正常的!(这也是符合逻辑的),最后还是换成br,display:block

    <br style="clear:both; display:block; height:0; font-size:1px; line-height: 0px; background:#666;" />

    才最终达到ie和ff统一,且按照预想中正确方式显示!

    对于其中的原因,目前我也不是很清楚。欢迎各位一起探讨。

  • 相关阅读:
    系统维护相关问题
    Python环境维护
    哈希表解决字符串问题
    论文笔记二:《A Tutoral on Spectral Clustering》
    论文笔记之哈希学习比较--《Supervised Hashing with Kernels》《Towards Optimal Binary Code Learning via Ordinal Embedding》《Top Rank Supervised Binary Coding for Visual Search》
    Java中String、StringBuffer、StringBuilder的比较与源 代码分析
    浙大pat1040 Longest Symmetric String(25 分)
    浙大pat1039 Course List for Student(25 分)
    浙大pat---1036 Boys vs Girls (25)
    百炼oj-4151:电影节
  • 原文地址:https://www.cnblogs.com/coffee/p/1664921.html
Copyright © 2011-2022 走看看