内部左浮动 div 不会垂直扩展容器 div答案

【问题标题】：Inner left-floating div's do not expand the container div vertically内部左浮动 div 不会垂直扩展容器 div
【发布时间】：2019-05-05 21:54:20
【问题描述】：

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

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

里面有多个左浮动div。问题是它们不会强制包含的 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？

【问题讨论】：

在jsfiddle.net创建一个演示

标签： html css

【解决方案1】：

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

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

【讨论】：

这是专门使用浮动div的时候需要做的吗？
不，只有当你希望 div 适应内容大小时。
非常感谢！我也有同样的问题，你是一个真正的绅士和学者。

【解决方案2】：

这是一个常见问题，可以使用“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 以触发它就足够了。支持:afterpseudo 元素的现代浏览器可以使用第一条语句，这样更简洁，不影响溢出属性。

请注意，您应该避免使用前面答案中建议的!importantstatement，因为这不是好的css。此外，如果您愿意并且不采取任何措施来解决问题，它将不允许您控制 div 的高度。

【讨论】：

【解决方案3】：

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

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

那么子元素就可以摆脱旧的神奇float属性了。

看看这个JSFiddle看看效果。

注意：当子元素的高度不一致时，flex 方式与float 方式的行为会有所不同。但很难说哪一个是正确的。

【讨论】：

【解决方案4】：

container{
    overflow: auto;
}

在最后，在封闭容器之前插入以下内容

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

容器会自动展开到最后一个clear:both

【讨论】：