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

任何想法???

先谢谢你。

编辑： here is a fiddle to test

Answer 1

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

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

jsFiddle example

.content {
    overflow:hidden;
}

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

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

Answer 2

我在内容容器的末尾使用了一个空的clear div

添加了CSS：

.clear {
    clear: both;
}

HTML：

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

Answer 3

您可以尝试此解决方案

.content:before, .content:after {
    content: " ";
    display: table;
    clear: both;
 }

或将display：table添加到内容div：

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

Answer 4

如何在所有div上设置边距和填充为0？

Answer 5

尝试在html布局中关闭类名的所有括号并添加css属性 float:left为.content类的css样式 http://jsfiddle.net/u3W79/

css背景颜色与浮动元素

5 个答案: