浮动子元素：overflow：hidden或clear：both？ [英] Floated Child Elements: overflow:hidden or clear:both?
问题描述
作为一个web开发人员，我经常会在另一个（父）div中有两个浮动（子）div。实际上我整天都这样做。
As a web developer I frequently will have two floated (child) divs inside of another (parent) div. Actually I do this all day long.
<style type="text/css">
#left {float:left;}
#right {float:right;}
</style>
<div id="parent">
<div id="left" class="child"> </div>
<div id="right" class="child"> </div>
</div>
这不会在没有额外的css / html的情况下工作，因为父节点不会自动增长以适应浮动的儿童。有两种流行的方法来克服：
1）向父级的css添加 overflow：hidden 。
2）添加第三个清除子< br style =clear：both; />
This doesn't work without an extra bit of css/html because the parent doesn't automatically grow to fit floated children. There are two popular ways of overcoming that:
1) Add overflow:hidden to the parent's css.
2) Add a 3rd "clearing" child <br style="clear:both;" />.
我知道有其他类似的问题，但我的问题是：
I know there's a few other similar questions about such things, but my question is:
哪种方法更好，为什么？
Which method is better and why? What are the pros and cons of each?
推荐答案
-
隐藏溢出 - 漂亮的固体方法。主要的缺点是如果你在父元素上设置高度，任何溢出将是...好，隐藏。我在创建带有浮动列表项的菜单时发现这一点 - 子菜单不会出现。
Hidden overflow - pretty solid method. The main disadvantage is if you set a height on the parent element, any overflow will be...well, hidden. I found this when creating a menu with floated list items - the submenus would not appear.
清除元素 - 与 height：0; clear：both; ，因为它不会在下面创建间隙。
Clearing element - rather than a line break, I would use a div with height: 0; clear: both; since it won't create a gap below. This is a more solid method, the only disadvantage being an extra element in the markup.
浮动父级 - 在我的经验中，有太多的情况下，你
Float the parent - in my experience there are too many situations where you don't want to float the parent element, so I would avoid it.
您也可以使用生成的内容方法：
You can also use the generated content method:
#parent:after {
content: ".";
visibility: hidden;
clear: both;
}
这样就不需要在标记中添加额外的元素，
This saves the need for an extra element in the markup, but it won't work in IE7 and below.
使用内联块 - 只记住此方法。而不是浮动两列，将它们设置为 display：inline-block ，它们将并排显示：
Use inline blocks - just remembered this method. Instead of floating the two columns, set them to display: inline-block and they will appear side-by-side:
.child {
display: inline-block;
vertical-align: top;
}
只有你必须记住的这个方法是如果在关闭标记和另一个的开始标记，列之间将出现一个空格（其大小取决于字体，因此难以计算）。只要你 ...< / div>< div id = ... ，那么这种方法工作正常，优于浮动元素IMO。
Only thing you must remember with this method is if there is any whitespace between the close tag of one block and the opening tag of another, a space will appear between the columns (the size of which depends on the font so it difficult to gauge). As long as you do ...</div><div id=... then this method works fine and is superior to floating elements IMO.
这篇关于浮动子元素：overflow：hidden或clear：both？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
