假设我们有一个非常简单的场景
<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,我们需要看到红色背景…问题是,我看不到红色背景充满了所有高度。
<divclass="right">
当子元素浮动时,它们将从文档流中删除。这样做时,父级将不再具有定义的尺寸,因为子级在技术上不会占用空间。因此,父元素自身折叠。当绝对定位子元素时,也会发生相同的情况。
在这种情况下,我们可以通过添加overflow:hidden到父元素来修复它,从而强制其包含子元素。另外也overflow:auto可以工作。有人可能会建议它比可能更好,overflow:hidden因为您将能够判断出是否有任何计算不可用。
overflow:hidden
overflow:auto
.content { overflow:hidden; }
现在父元素不再折叠,红色背景可见。
如果要在旧版浏览器中寻求支持,也可以使用clearfix,但我不建议这样做。