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

Question

作为一名Web开发人员，我经常会在另一个（父母）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

1. 隐藏溢出 - 非常可靠的方法。主要的缺点是，如果你在父元素上设置高度，任何溢出将会......好，隐藏。我在创建浮动列表项目的菜单时发现这一点 - 子菜单不会出现。

2. 清除元素 - 而不是换行符，我会使用与height: 0; clear: both;的div，因为它不会在下面产生差距。这是一个更坚实的方法，唯一的缺点是标记中有一个额外的元素。

3. 浮动父 - 在我的经验中有太多的情况，你不想浮动父元素，所以我会避免它。

4. 您还可以使用所产生的内容方法：

   #parent:after { 
       content: "."; 
       visibility: hidden; 
       clear: both; 
   } 
   

   这样可以节省在标记一个额外的元素的需要，但它不会在IE7和下面的工作。

5. 使用内嵌块 - 只记得这种方法。相反，浮动的两列，将其设置为display: inline-block，他们将出现并排侧：

   .child { 
       display: inline-block; 
       vertical-align: top; 
   } 
   

   你必须用这种方法请记住唯一的事情是，如果有一个块的结束标记之间的任何空白另一个的开始标签，一个空格将出现在列之间（其大小取决于字体，因此很难衡量）。只要你做...</div><div id=...那么这种方法工作正常，并优于浮动元素国际海事组织。

Answer 2

第二个是完全不必要的，并增加了额外的标记。只是别的错误。如果它适合帐单，请使用第一个。你也可以浮动父元素来做同样的事情，尽管它可能不适合你正在做的事情。

Answer 3

PPK在Clearing floats上对QuirksMode进行了讨论。