清浮动方法汇总

浮动元素脱离了文档流，所以父元素没办法预知它的大小，导致父元素没有了高度，设置了背景色也看不到等一系列问题出现了。这时就需要我们去清浮动。

接下来总结了下清浮动的几种方式。

 

方案一：
在浮动元素后边加一个空标签，要块级的，IE6 7行内元素也可以

i{
     clear:both;
     height:0;
     display:block;
}
<div style='background:red;'>
     <img style="float:left;" src="http://img02.taobaocdn.com/bao/uploaded/i3/T1WTxlFftaXXb1upjX.jpg_290x290.jpg"/>
     <i></i>
</div>

缺点：有冗余标签

方案二：
设置overflow:hidden，同时IE6下需要触发hasLayout

.clearfix{
     overflow:hidden; /*IE7+*/
     _zoom:1;/*IE6*/
}

缺点：内部元素没办法定位到外面

方案三：
浮动元素自身是清浮动的

.clearfix{
     float:left;
}

缺点：虽然自身的浮动清除了，但是把问题留给他父亲了

方案四：

.clearfix{
     *zoom:1;/*IE6 7 只要触发layout即可*/
}
.clearfix:after{ /*原理同方案一，只是IE6 7不支持:after伪类*/
     content:".";
     clear:both;
     height:0;
     font-size:0;
     line-height:0;
     display:block;
}

这是目前使用比较广泛的方式，需要注意的是content属性不能为空格，必须有内容，否则firefox下会出现一个外边距传递的bug。

方案五：

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}
<div class="clearfix" style='background:red;'>
     <img style="float:left;" src="http://img02.taobaocdn.com/bao/uploaded/i3/T1WTxlFftaXXb1upjX.jpg_290x290.jpg"/>
</div>

这种方式比较新颖，也有很多人使用这种方式