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; } |