随着浮动的孩子，CSS包装器不会增长

Question

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

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

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

Answer 1

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

1. 使用clear: both在浮点数后添加div。 Example

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

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

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

3. 使父元素成为浮点数。 Example

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

4. 使用：在CSS伪元素之后。 Example

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

5. 将设定高度添加到父元素。 Example

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

就个人而言，我使用选项2来简化和语义“

Answer 2

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

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