html - 带有 float 元素的CSS背景颜色

Question

假设我们有这个非常简单的场景

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

 <div class="content">
    <div class="left">
       <p>some content</p>
    </div>
    <div class="right">
       <p>some content</p>
    </div>
 </div>

这是样式:

 .content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

 .left {
     float: left;
     height: 300px;
     background: green;
 }

 .right {
     float: right;
     background: yellow;
 }

事情是...当我向 <div class="right"> 添加内容时它应该拉下父 div，我们需要看到红色背景...问题是，我看不到红色背景填满所有高度。

编辑: here is a fiddle to test

Answer 1

当子元素 float 时，它们将脱离文档流。这样做时，父级不再定义尺寸，因为从技术上讲，子级不占用空间。因此，父元素自行折叠。当绝对定位子元素时也会发生同样的事情。

在这种情况下，我们可以通过向父元素添加 overflow:hidden 来修复它，从而强制它包含子元素。或者 overflow:auto 也能正常工作。有些人可能会建议它甚至比 overflow:hidden 更好，因为您将能够判断是否有任何计算被关闭。

jsFiddle example

.content {
    overflow:hidden;
}

现在父元素不再折叠，红色背景可见。

如果您正在寻找旧版浏览器的支持，您也可以使用 clearfix，但我不建议这样做。