As a web developer I frequently will have two floated (child) divs inside of another (parent) div. Actually I do this all day long.
作为一名web开发人员，我经常会在另一个div(父div)中使用两个浮动子div。
<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>
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;" />.
如果没有额外的css/html，这将无法工作，因为父类不会自动成长为适合浮动的子类。有两种常见的方法可以克服这个问题:1)添加溢出:隐藏到父css中。2)添加第三个“清除”子元素
。
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?
哪种方法更好，为什么更好?它们的优缺点分别是什么?
3 个解决方案
#1
26
-
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.
隐藏溢出-相当坚实的方法。主要的缺点是如果您在父元素上设置了一个高度，那么任何溢出都将是……隐藏。我在创建带有浮动列表项的菜单时发现了这一点——子菜单不会出现。
-
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.清除元素——我使用高度为0的div而不是换行符;明确:;因为它不会在下面产生空隙。这是一种更可靠的方法，惟一的缺点是标记中增加了一个元素。
-
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.
这就省去了在标记中添加额外元素的需要，但在IE7和以下版本中不能使用。
-
Use inline blocks - just remembered this method. Instead of floating the two columns, set them to
display: inline-blockand they will appear side-by-side:使用内联块——记住这个方法。而不是将两列浮动，设置为显示:inline-block，它们将并排出现:
.child { display: inline-block; vertical-align: top; }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.您必须记住的是，如果一个块的结束标记和另一个块的开始标记之间有空格，那么列之间就会出现空格(这个空格的大小取决于字体，因此很难估计)。只要你做……< / div > < div id =…该方法具有较好的效果，优于浮点数。
#2
0
The second is totally unnecessary and adds extra markup. Just something else to go wrong. Use the first if it fits the bill. You can also float the parent element to do the same thing though it might not fit what you're doing.
第二个是完全没有必要的，并添加额外的标记。只是出了什么问题。如果符合要求，就用第一个。您还可以让父元素执行相同的操作，尽管它可能不适合您正在做的事情。
#1
26
-
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.
隐藏溢出-相当坚实的方法。主要的缺点是如果您在父元素上设置了一个高度，那么任何溢出都将是……隐藏。我在创建带有浮动列表项的菜单时发现了这一点——子菜单不会出现。
-
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.清除元素——我使用高度为0的div而不是换行符;明确:;因为它不会在下面产生空隙。这是一种更可靠的方法，惟一的缺点是标记中增加了一个元素。
-
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.
这就省去了在标记中添加额外元素的需要，但在IE7和以下版本中不能使用。
-
Use inline blocks - just remembered this method. Instead of floating the two columns, set them to
display: inline-blockand they will appear side-by-side:使用内联块——记住这个方法。而不是将两列浮动，设置为显示:inline-block，它们将并排出现:
.child { display: inline-block; vertical-align: top; }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.您必须记住的是，如果一个块的结束标记和另一个块的开始标记之间有空格，那么列之间就会出现空格(这个空格的大小取决于字体，因此很难估计)。只要你做……< / div > < div id =…该方法具有较好的效果，优于浮点数。
#2
0
The second is totally unnecessary and adds extra markup. Just something else to go wrong. Use the first if it fits the bill. You can also float the parent element to do the same thing though it might not fit what you're doing.
第二个是完全没有必要的，并添加额外的标记。只是出了什么问题。如果符合要求，就用第一个。您还可以让父元素执行相同的操作，尽管它可能不适合您正在做的事情。