清浮动方法汇总

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

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

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

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

缺点：有冗余标签

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

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

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

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

.clearfix{
     float:left;
}

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

方案四：

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

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

方案五：

 1 .clearfix:before,
 2 .clearfix:after {
 3     content:"";
 4     display:table;
 5 }
 6 .clearfix:after {
 7     clear:both;
 8 }
 9 .clearfix {
10     *zoom:1;
11 }
12 <div class="clearfix" style='background:red;'>
13      <img style="float:left;" src="http://img02.taobaocdn.com/bao/uploaded/i3/T1WTxlFftaXXb1upjX.jpg_290x290.jpg"/>
14 </div>

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