一尘不染

CSS背景色与浮动元素

html

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

 <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;
 }

事情是…当我向<divclass="right">其中添加内容时,应该拉下父div,我们需要看到红色背景…问题是,我看不到红色背景充满了所有高度。


阅读 343

收藏
2020-05-10

共1个答案

一尘不染

当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。

在这种情况下,我们可以通过添加overflow:hidden到父元素来修复它,从而强制其包含子元素。另外也overflow:auto可以工作。有人可能会建议它比可能更好,overflow:hidden因为您将能够判断出是否有任何计算不可用。

.content {
    overflow:hidden;
}

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

如果要在旧版浏览器中寻求支持,也可以使用clearfix,但我不建议这样做。

2020-05-10