html - float 子元素 : overflow:hidden or clear:both?

Question

作为一名网络开发人员，我经常会在另一个(父)div 中放置两个 float (子)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，这是行不通的，因为父级不会自动增长以适应 float 的子级。有两种流行的方法可以克服这个问题:
1) 添加overflow:hidden到 parent 的CSS。
2) 添加第三个“清除”子 <br style="clear:both;" /> .

我知道关于这些事情还有其他一些类似的问题，但我的问题是:

Which method is better and why? What are the pros and cons of each?

Answer 1

1. overflow hidden - 非常可靠的方法。主要缺点是如果您在父元素上设置高度，则任何溢出都将......嗯，隐藏。我在创建带有 float 列表项的菜单时发现了这一点 - 子菜单不会出现。

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

3. float 父元素 - 根据我的经验，有太多情况您不想 float 父元素，所以我会避免它。

4. 你也可以使用生成内容的方法:

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

   这样可以节省标记中额外元素的需要，但在 IE7 及更低版本中不起作用。

5. 使用内联 block - 刚刚记住了这个方法。不要 float 这两列，而是将它们设置为 display: inline-block它们会并排出现:

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

   使用此方法您必须记住的唯一一件事是，如果一个 block 的结束标记和另一个 block 的开始标记之间有空格，则列之间会出现一个空格(其大小取决于字体，因此很难来衡量)。只要你做...</div><div id=...那么这种方法效果很好，并且优于 float 元素 IMO。