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 {&nbsp; &nbsp; overflow:hidden;}现在父元素不再折叠，红色背景可见。如果要在旧版浏览器中寻求支持，也可以使用clearfix，但我不建议这样做。

Answer 2

我在内容容器的末尾使用了一个空的clear div添加了CSS：.clear {&nbsp; &nbsp; clear: both;}HTML：<div class="content">&nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; <p>some content</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; <p>some content</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="clear"></div></div>

Answer 3

您可以尝试此解决方案.content:before, .content:after {&nbsp; &nbsp; content: " ";&nbsp; &nbsp; display: table;&nbsp; &nbsp; clear: both;&nbsp;}&nbsp;或在内容div中添加display：table：.content {&nbsp; &nbsp; width: 960px;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; background: red;&nbsp; &nbsp; clear: both;&nbsp; &nbsp; display: table;&nbsp;}