当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。
在这种情况下,我们可以通过添加overflow:hidden
到父元素来修复它,从而强制其包含子元素。另外也overflow:auto
可以工作。有人可能会建议它比可能更好,overflow:hidden
因为您将能够判断出是否有任何计算不可用。
.content {
overflow:hidden;
}
现在父元素不再折叠,红色背景可见。
如果要在旧版浏览器中寻求支持,也可以使用clearfix,但我不建议这样做。