ClearFix 与溢出 [重复]答案

【问题标题】：ClearFix vs Overflow [duplicate]ClearFix 与溢出 [重复]
【发布时间】：2011-01-23 07:58:02
【问题描述】：

这是标准的浮动问题。您在父容器 div 中有一堆浮动元素。由于子项是浮动的，因此父项不会扩展到包括所有子项。

我知道 clearfix 解决方案以及将父容器 div 上的溢出属性设置为“自动”或“隐藏”。http://www.quirksmode.org/css/clearing.html 对我来说，设置溢出方法似乎更好，因为它只是一个属性。我想了解的是 clearfix 方法何时比这种方法更有优势，因为我看到它被非常频繁地使用。

附：我不关心IE6。

【问题讨论】：

标签： css clearfix

【解决方案1】：

您唯一应该使用插入不可见内容的“clearfix”方法来清除是，如果您需要一个元素在溢出您应用它的元素时可见，否则触发 hasLayout + 溢出是黄金。

注意在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; }

【讨论】：

IE8 不再有hasLayout。
对，但总的来说它确实如此，因为它支持旧模式而不是 IE8 标准模式。
我还应该补充一点，对父元素应用浮点数与overflow:hidden 的效果相同。因此，如果您需要元素溢出（例如阴影），并且可以将浮动应用于父级，这通常比 clearfix 更好。
如果元素水平居中，则不建议浮动父元素，也就是 90% 的时间是 #wrapper，如本例所示。