ClearFix vs溢出 [英] ClearFix vs Overflow

问题描述

它的标准浮动问题。你有一堆浮动元素在父容器div。由于子元素是浮动的，所以父元素不会展开以包含所有子元素。

Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them.

我知道clearfix解决方案以及在父容器div上设置overflow属性auto或hidden。 http://www.quirksmode.org/css/clearing。 html
我设置溢出方法似乎更好的只是一个属性。我想了解的是，clearfix方法何时优于这种方法，因为我看到它被经常使用。

I know about the clearfix solution as well as setting the overflow property on the parent container div to "auto" or "hidden".http://www.quirksmode.org/css/clearing.html To me setting the overflow method seems much nicer as its just one property. What I want to understand is when does the clearfix approach has advantage over this method cause I see it being used extremely often.

我不关心IE6。

推荐答案

唯一的时候你应该打扰使用clearfix方法插入不可见的内容来清除是如果你需要一个元素是可见的，当它溢出你应用它的元素，否则触发hasLayout +溢出是金色的。

The only time you should bother using the "clearfix" method that inserts invisible content to clear is if you need an element to be visible when it overflows the element you're applying it to, otherwise triggering hasLayout + overflow is golden.

注意在IE7溢出隐藏触发hasLayout。不确定IE8。

Note that in IE7 overflow hidden triggers hasLayout. Not sure about IE8.

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

上述方法在大多数情况下都可以正常工作，除非你需要说，#header溢出#wrapper ..

The method above will work fine in most all cases unless you need say, #header to overflow past #wrapper..

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

这篇关于ClearFix vs溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！