使用浮动元素的CSS背景颜色

Question

使用浮动元素的CSS背景颜色

25

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

 <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下拉，我们需要看到红色背景... 问题是，我无法看到红色背景填充整个高度。

编辑： 这里有一个测试fiddle

- andresmijares

6个回答

1

我在内容容器末尾使用了一个空的清除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>

- Alexander Schranz

是的，那将是第一个想到的解决方案，但我无法添加额外的HTML元素...也许使用right:after会有用。 - andresmijares

1

因为浮动元素脱离了正常流，它们在父容器中不占据任何空间。所以如果一个容器只包含浮动元素，它的高度将为0像素，因为所有浮动元素都被从容器中移除了。因此，容器的背景颜色会消失。您可以在内容容器中添加display: flow-root来解决这个问题。

- abu sayed

0

你可以尝试这个解决方案

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

或者将 display:table 添加到 content div 中：

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

- Loothmane

-2

你可以尝试将所有的div元素的margin和padding都设置为0，看看效果如何？

- Sorunome

-2

尝试关闭 HTML 布局中类名的所有括号，并将 CSS 样式中的 float:left 属性添加到 .content 类的 CSS 样式中http://jsfiddle.net/u3W79/。

- Andriy Ivaneyko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

当子元素被浮动时，它们会脱离文档流。这样一来，父元素就不再有定义的尺寸了，因为子元素从技术上讲并没有占用空间。因此，父元素会出现折叠的情况。当子元素被绝对定位时，也会发生同样的事情。

在这种情况下，我们可以通过向父元素添加 overflow:hidden 来解决问题，从而强制它包含子元素。或者，overflow:auto 也同样有效。有些人认为，使用 overflow:auto 或许比 overflow:hidden 更好，因为你将能够发现任何计算错误。 jsFiddle 示例

.content {
    overflow:hidden;
}

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

如果您希望在旧的浏览器中获得支持，可以选择使用清除浮动（clearfix），但我不建议这样做。