内部左浮动的div不会使容器div垂直扩展

Question

我有一个包含如下属性的容器 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？

- crmepham

---

在http://jsfiddle.net/上创建一个演示。 - Sotiris

Answer 1

你需要为主要的 div 元素设置 overflow 属性。overflow: auto; 这会强制 div 容器扩展并适应内容。

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

- Pawel

---

使用浮动div时，这是需要做的事情吗？ - crmepham

不，只有在您希望 div 适应内容大小时才需要这样做。 - Pawel

非常感谢！我也遇到了同样的问题，你是真正的绅士和学者。 - Dean

Answer 2

这是一个常见问题，可以通过使用“clearfix”解决方案来解决。设置overflow属性可以解决此问题，但是还有更好的解决方案，例如以下内容：

.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伪元素的现代浏览器可以使用第一种方法，这种方法更加简洁，不影响溢出属性。

请注意，应该避免使用!important语句，因为它不是好的 CSS。此外，如果您希望控制 div 的高度，它也无法实现，并且对解决问题没有任何帮助。

- MMM

Answer 3

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

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

然后子元素可以摆脱旧的神奇的 float 属性。

查看这个 JSFiddle 来查看效果。

注意：当子元素的高度不均匀时，弹性盒模型的表现与 float 方式不同。但很难说哪种方式是正确的。

- Ming

Answer 4

container{
    overflow: auto;
}

将以下内容插入到容器结束标签之前：

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

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

- TheTechGuy