ClearFix vs Overflow

Question

这是标准的浮动问题。在父容器div中有一堆浮动元素。因为子元素是浮动的，所以父元素不会扩展到包含所有元素。

我知道clearfix解决方案以及在父容器div上设置overflow属性为"auto“或”hidden“。http://www.quirksmode.org/css/clearing.html设置overflow方法对我来说似乎要好得多，因为它只有一个属性。我想知道的是，clearfix方法在什么时候比这种方法更有优势，因为我看到它被经常使用。

附言:我并不担心IE6。

Answer 1

唯一需要使用"clearfix“方法插入不可见内容来清除的情况是，当一个元素溢出你要应用的元素时，它是可见的，否则触发hasLayout + overflow就是金色的。

请注意，在IE7中，overflow隐藏触发器hasLayout。对IE8不太确定。

#wrapper { width:80em; overflow:hidden; }

上面的方法在大多数情况下都可以很好地工作，除非您需要#header溢出通过#wrapper..

#wrapper { width:80em; position:relative; }
#wrapper:after {  content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }