ClearFix vs Overflow

Question

它是标准的浮动问题.在父容器div中有一堆浮动元素.由于孩子是浮动的,因此父母不会扩展以包括所有孩子.

我知道clearfix解决方案以及将父容器div上的overflow属性设置为"auto"或"hidden".http://www.quirksmode.org/css/clearing.html 对我来说,设置overflow方法看起来好像只是一个属性.我想要了解的是,clearfix方法何时优于此方法,因为我发现它经常使用.

PS我不关心IE6.

Answer 1

唯一一次你应该使用"clearfix"方法来插入不可见的内容来清除它是否需要一个元素在溢出你正在应用它的元素时可见,否则触发hasLayout + overflow是黄金.

注意在IE7中溢出隐藏的触发器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; }