关于css:ClearFix vs Overflow

ClearFix vs Overflow

本问题已经有最佳答案,请猛点这里访问。

这是标准的浮动问题。在父容器分区中有一堆浮动元素。由于子容器是浮动的,父容器不会扩展到包含所有这些元素。

我了解clearfix解决方案,并将父容器div的overflow属性设置为"auto"或"hidden",http://www.quirksmode.org/css/clearing.html。在我看来,设置溢出方法作为它的一个属性似乎更好。我想了解的是,ClearFix方法什么时候比这个方法有优势,因为我看到它被频繁使用。

另外,我不关心IE6。


使用"clearfix"方法插入不可见内容以清除的唯一时间是,当某个元素溢出要应用它的元素时,是否需要该元素可见,否则触发hasLayout+溢出是金黄色的。

注意,在IE7中,溢出隐藏触发器具有布局。不确定IE8。

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

上面的方法在大多数情况下都可以很好地工作,除非您需要说,header以溢出包装器。

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