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,我们需要看到红色背景......事情是,我看不到红色背景填满所有高度.

有任何想法吗？？？

非常感谢先进.

编辑: 这是一个小提琴测试

Answer 1

当子元素浮动时,它们将从文档流中取出.在这样做时,父母不再具有定义的维度,因为孩子在技术上不占用空间.因此,父元素自身崩溃.绝对定位子元素时也会发生同样的事情.

在这种情况下,我们可以通过添加overflow:hidden到父元素来修复它,从而强制它包含子元素.或者overflow:auto也可以.有些人可能会建议它比overflow:hidden你能够判断是否有任何计算更好.

jsFiddle例子

.content {
    overflow:hidden;
}

现在,父元素不再折叠,红色背景可见.

如果您在旧浏览器中寻找支持,您也可以使用clearfix,但我不建议这样做.