Html 左内浮动div'；s不垂直展开容器div

我有一个具有以下属性的容器div：

#cat_container{
margin:0;
padding:5px;
border:1px solid red;
min-height:200px;
}

内部有多个左浮动div。问题在于，它们不会强制包含div的部分向下扩展，而是重叠并继续在容器div的边界之外

左浮动分区：

.cat_wrap{
border: 1px solid #000;
width:100px;
min-height:120px;
margin:0 10px 5px 0;
padding:0;
float:left;
}

---

如果我取出左浮点，则包含的div会像它应该做的那样垂直扩展。那么，如何使内部div向左浮动，同时垂直扩展容器div？

您需要为主div设置溢出。溢出：自动；这将迫使div容器扩展并适应内容

#cat_container{
   margin:0;
   padding:5px;
   border:1px solid red;
   min-height:200px;
   overflow: auto;
   height: auto !important;
}

---

这是一个常见问题，使用“clearfix”解决方案解决。设置溢出将解决此问题，但是有更好的解决方案，如以下所示：

.mydiv:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .mydiv             { zoom: 1; } /* IE6 */
*:first-child+html .mydiv { zoom: 1; } /* IE7 */

此解决方案的要点是触发div的

hasLayout

属性。幸运的是，IE 6/7将缩放设置为1就足以触发该属性。支持

：after

伪元素的现代浏览器可以使用第一条语句，这条语句更干净，不会影响溢出属性

---

请注意，您应该避免使用

！重要的

声明，如前面的答案所示，因为这不是好的css。此外，如果您愿意，它将不允许您控制div的高度，并且不会采取任何措施来解决问题。

现在是2016。这样做的一个好方法是使用

flex

属性

.container {
  display: flex;
  flex-wrap: wrap;
}

然后子元素可以去掉旧的神奇的

float

属性

看看这个，看看效果

注意：当子元素的高度不一致时，flex-way将与

float

方式表现不同。但很难说哪一个是正确的

container{
    overflow: auto;
}

在封闭容器之前的末尾插入以下内容

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

---

容器将自动扩展到最后一个清除位置：两个

都在创建一个演示。这是特别使用浮动div时需要做的事情吗？不，仅当您希望div适应内容大小时。非常感谢！我也有同样的问题，你是一个真正的绅士和学者。