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

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. 清除元素 - 而不是换行符,我会使用div,height: 0; clear: both;因为它不会在下面创建一个间隙.这是一种更加可靠的方法,唯一的缺点是标记中有一个额外的元素.

3. 浮动父级 - 根据我的经验,有太多情况你不想浮动父元素,所以我会避免它.

4. 您还可以使用生成的内容方法:

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

   这样就不需要在标记中添加额外的元素,但它在IE7及以下版本中不起作用.

5. 使用内联块 - 只记得这个方法.而不是浮动两列,将它们设置为display: inline-block并且它们将并排显示:

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

   只有你必须记住的方法是,如果一个块的close标签和另一个块的开始标签之间有任何空格,列之间会出现一个空格(其大小取决于字体,因此难以测量) .只要你这样做,...</div><div id=...这个方法工作正常,优于浮动元素IMO.