Question

作为一名网络开发者，我经常在另一个（父）div中有两个浮动（子）div。其实我整天都这样做。

<style type="text/css">
    #left {float:left;}
    #right {float:right;}
</style>
<div id="parent">
    <div id="left" class="child">&nbsp;</div>
    <div id="right" class="child">&nbsp;</div>
</div>

如果没有额外的css / html，这不起作用，因为父级不会自动增长以适应浮动的子级。有两种流行的方法可以克服：
1）将overflow:hidden添加到父母的CSS中。
2）添加第3个“清算”孩子<br style="clear:both;" />。

我知道还有其他类似问题，但我的问题是：

哪种方法更好，为什么？什么每个人的利弊是什么？

Answer 1

隐藏溢出 - 非常可靠的方法。主要的缺点是如果你在父元素上设置一个高度，任何溢出都将是......好，隐藏。我在创建带有浮动列表项的菜单时发现了这一点 - 子菜单不会出现。
清除元素 - 而不是换行符，我会使用带height: 0; clear: both;的div，因为它不会在下面创建间隙。这是一种更加可靠的方法，唯一的缺点是标记中有一个额外的元素。
浮动父级 - 根据我的经验，有太多情况你不想浮动父元素，所以我会避免它。
您还可以使用生成的内容方法：
```
#parent:after {
  content: ".";
  visibility: hidden;
  clear: both;
}
```
这样可以节省标记中额外元素的需要，但在IE7及以下版本中无法使用。
使用内联块 - 只记得这个方法。不是将两列浮动，而是将它们设置为display: inline-block，它们将并排显示：
```
.child {
  display: inline-block;
  vertical-align: top;
}
```
只有你必须记住的方法是，如果一个块的close标记和另一个块的开始标记之间有空格，则列之间会出现一个空格（其大小取决于字体，因此很难衡量）。只要你执行...</div><div id=...，这个方法就可以正常工作，并且优于浮动元素IMO。

Answer 2

第二个是完全没必要的，并添加了额外的标记。只是出错了。如果适合账单，请使用第一个。您也可以浮动父元素来执行相同的操作，尽管它可能不适合您正在执行的操作。

Answer 3

PPK在QuirksMode的Clearing floats上讨论了这个问题。

浮动子元素：溢出：隐藏或清除：两者？

3 个答案: