css - CSS 包装器不会随着浮动子级一起增长

Question

我的页面上有一个按此规则设置样式的包装器

#wrapper{
    width: 900px;
    margin: 0 auto;
    background: #FFF;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

问题是，如果孩子们漂浮，包装就不会增长。经过一番谷歌搜索后，我发现添加 display:none 可以解决它。确实如此，但我不能这样做，因为我的一些元素必须溢出包装（通过包装伸出的设计元素）。我如何在不使用溢出的情况下解决它：隐藏？

score 2 · Accepted Answer

这是使用浮点数时的常见问题。有几个常见的解决方案：

在浮动后添加一个 div clear: both。例子。

<div style="float: left"></div>
<div style="float: left"></div>
<div style="clear: both"></div>

将两个浮动添加到具有 CSS 属性的容器中overflow: auto。例子。

<div style="overflow: auto">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使父元素浮动。例子。

<div style="float: left">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

使用 :after CSS 伪元素。例子。

.parentelement:after {
    content: ".";
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}

向父元素添加设置高度。例子。

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

就个人而言，为了简单和语义，我使用选项 2

score 2 · Accepted Answer

您需要清除浮动元素，例如

<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>

2 回答 2