考虑以下 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>以及相应的 CSS：
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
}
.left {
float: left;
height: 300px;
background: green;
}
.right {
float: right;
background: yellow;
}向 .right 添加内容时，父 .content div 无法拉伸以适应其高度子元素，导致不可见的红色背景覆盖扩展区域。
浮动元素（如本例中的 .left 和 .right）将从文档的正常流程中删除。这会影响父元素，因为由于子元素不占用物理空间，它不再具有定义的高度。因此，父元素会自行折叠。
要纠正此问题，有必要强制父元素保持其尺寸，尽管子元素是浮动的。这可以通过将overflow:hidden添加到.content来实现。
.content {
overflow: hidden;
}或者，可以使用overflow:auto，提供类似的功能，同时允许您识别任何高度差异。
这修改确保 .content 封装其浮动子项，解决了红色背景被截断的问题。
对于支持有限的浏览器，使用clearfix hack可以解决这个问题。但是，为了现代浏览器的兼容性，不建议使用这种方法。
以上是使用浮动元素时如何防止CSS背景隐藏内容？的详细内容。更多信息请关注PHP中文网其他相关文章！
