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

小编典典

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

css

作为一名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）添加第三个“清除”子级<br style="clear:both;" />。

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

哪种方法更好，为什么？各自的优缺点是什么？

阅读 308

2020-05-16

共1个答案

小编典典

隐藏的溢出-非常可靠的方法。主要缺点是，如果在父元素上设置高度，则任何溢出都会被隐藏。我在创建带有浮动列表项的菜单时发现了这一点-子菜单不会出现。
清除元素-我将使用div而不是换行符，height: 0; clear: both;因为它不会在下面产生间隙。这是一种更可靠的方法，唯一的缺点是标记中有额外的元素。
浮动父元素-根据我的经验，在很多情况下，您都不希望浮动父元素，因此我会避免使用它。
您还可以使用生成的内容方法：

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

这样可以节省标记中的额外元素，但在IE7及以下版本中将无法使用。

使用内联块-只是记住了此方法。与其将两列浮动，不如将它们设置为display: inline-block，它们将并排显示：

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

使用此方法时，您唯一必须记住的是，如果一个块的关闭标签与另一块的开始标签之间有空白，则各列之间会出现一个空格（其大小取决于字体，因此很难衡量）
。只要您这样做，...</div><div id=...此方法就可以很好地工作，并且优于浮动元素IMO。

2020-05-16