July 15, 2016

清除浮动的最佳方案：clearfix

CSS清除浮动float闭合，很多同学都在使用下面的骨灰级解决办法：

.clear{clear:both;}

或者

.clear{clear:both;height:0;overflow:hidden;}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear，我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构，虽然只是加个div。

最优浮动闭合方案：

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

用法很简单，在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端，但的确是小问题。改变css写法就ok了：

.demo:after,.demo2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.demo,.demo2{*+height:1%;}

以上写法就避免了改变html结构，直接用css解决了。

.clearfix{overflow:auto;zoom:1} /* zoom is only for IE6 */

清除浮动这谭水很深很深，但是上面这个简单的解决方案已经可以在今天所有的主要浏览器上工作。

当然, overflow设置为hidden也可以的:

.clearfix{overflow:hidden;zoom:1} /* zoom is only for IE6 */

目的是一样的, 区别是: 如果你使用auto值, 当内容撑开的时候,会显示滚动条, hidden则不会.