css背景颜色与浮动元素
比方说，我们有这个非常简单的情况
<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，我们需要看到红色的背景…事情是，我看不到红色背景填充所有的高度。
有任何想法吗？？？
多谢先进。
编辑： 这里是一个小提琴来testing
当孩子元素浮动时，他们被从文档stream中取出。 在这样做的时候，父母不再有定义的维度，因为孩子在技术上并不占用空间。 因此，父元素自身崩溃。 同样的事情也发生在绝对定位子元素的时候。
在这个例子中，我们可以通过向父元素添加overflow:hidden来修复它，从而迫使它包含子元素。 或者overflow:auto工作也是如此。 有些人可能会build议它比overflow:hidden更好overflow:hidden因为你将能够知道是否有任何计算closures。
jsFiddle的例子
.content { overflow:hidden; }
现在父元素不再折叠，红色背景可见。
如果您在旧版浏览器中寻求支持，也可以使用clearfix，但我不build议这样做。
我在内容容器的末尾使用了一个空白的清晰div
添加了CSS：
.clear { clear: both; }
HTML：
<div class="content"> <div class="left"> <p>some content</p> </div> <div class="right"> <p>some content</p> </div> <div class="clear"></div> </div>
如何在ALL div上设置边距和填充为0？
尝试在html布局中closures类名称的所有括号，并添加css属性float:left .content类的css风格http://jsfiddle.net/u3W79/
