假设我们有这个非常简单的场景
<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,我们需要看到红色背景...问题是,我看不到红色背景填满所有高度。
最佳答案
当子元素 float 时,它们将脱离文档流。这样做时,父级不再定义尺寸,因为从技术上讲,子级不占用空间。因此,父元素自行折叠。当绝对定位子元素时也会发生同样的事情。
在这种情况下,我们可以通过向父元素添加 overflow:hidden
来修复它,从而强制它包含子元素。或者 overflow:auto
也能正常工作。有些人可能会建议它甚至比 overflow:hidden
更好,因为您将能够判断是否有任何计算被关闭。
.content {
overflow:hidden;
}
现在父元素不再折叠,红色背景可见。
如果您正在寻找旧版浏览器的支持,您也可以使用 clearfix,但我不建议这样做。
关于html - 带有 float 元素的CSS背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20180081/