有趣的浮动清除

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

　　我想要的最终效果是

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="width:960px; height:100px; background:#6F0; margin:0 auto;">
    <a 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统一，且按照预想中正确方式显示！

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