CSS清除浮动方法汇总

清除浮动这个事儿，说难不难，说简单也容易踩坑。很多开发者习惯用overflow: hidden来暴力解决，但有时候它带来的副作用也挺头疼的。其实，一个稳定、兼容性又好的方案，就是用一个专门的class来触发BFC（块级格式化上下文），让父容器自己把浮动的子元素“兜住”。

具体怎么操作？直接看代码。

对于IE浏览器，老版本需要触发hasLayout，用zoom: 1就能搞定：

//IE浏览器
.clearfloat{
    zoom:1
}

而对于现代浏览器（以及IE8+），则用经典的::after伪元素方案，把伪元素变成块级、清除两边浮动、再隐藏起来，不让它占据视觉空间：

//其他浏览器
.clearfloat::after{
    display:block;
    clear:both;
    content:"";
    visibility: hidden;
    height:0
}

这样组合起来，既照顾了老IE，又能让Chrome、Firefox等主流浏览器正常工作。把这两个规则写在一起，然后给需要清除浮动的父容器加上clearfloat这个class就行，省心又干净。