css清除浮动的四种方法

额外标签法

w3c推荐用法

1
2
3
4
5
6
7
<div class="tablist" >
    <div style="float:left">标签1</div>
    <div style="float:left">标签2</div>
    <div style="float:left">标签3</div>
    <div style="item">标签4</div>
    <div style="clear:both"></div>
</div>

overflow

最简单

给父元素添加 ：

1
overflow：hidden/auto/scroll

：after伪元素法

百度、淘宝、网易用的方法

给父元素添加：

1
2
3
4
5
6
7
8
9
10
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.clearfix { /* IE6、7专有 */
    *zoom :1
}

双伪元素法

小米、腾讯用的方法

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix { /* IE6、7专有 */
    *zoom :1
}