如何解决CSS背景色与浮动元素
当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。
在这种情况下,我们可以通过添加overflow:hidden
到父元素来修复它,从而强制其包含子元素。另外也overflow:auto
可以工作。有人可能会建议它比可能更好,overflow:hidden
因为您将能够判断出是否有任何计算不可用。
.content {
overflow:hidden;
}
现在父元素不再折叠,红色背景可见。
如果要在旧版浏览器中寻求支持,也可以使用clearfix,但我不建议这样做。
解决方法
假设我们有一个非常简单的场景
<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,我们需要看到红色背景…问题是,我看不到红色背景充满了所有高度。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。