CSS 包装器没有随着浮动子项的增长而增长

Question

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

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

问题是，如果子项浮动，包装器不会增长。经过一番谷歌搜索，我发现添加显示：无可以解决它。它做到了，但我不能这样做，因为我的一些元素必须溢出包装器（通过包装器伸出的设计元素）。如何在不使用溢出：隐藏的情况下解决它？

Answer 1

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

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

Answer 2

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

1. 在带有 clear: both 的浮点数之后添加一个div。例。

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

2. 将两个浮点数添加到具有 CSS 属性 overflow: auto 的容器中。例。

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

3. 使父元素成为浮点型。例。

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

4. 使用 ：after CSS 伪元素。例。

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

5. 向父元素添加设置的高度。例。

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

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