清除浮动只是父容器,而不是祖先？

Question

我有以下布局与2级浮动容器:

<div id="navigation" style="float: left; width: 150px; height: 200px; background-color: #eee">Navigation</div>
<div id="container" style="margin-left: 150px; background-color: #f00">
    <div style="float: left; width: 50%; height: 100px; background-color: #ff0">Block</div>
    <div style="float: left; width: 50%; height: 20px; background-color: #f0f">Block</div>
    <div style="clear: both"></div>
    <div style="float: left; width: 50%; height: 50px; background-color: #00f">This Block</div>
</div>

您可以在http://jsfiddle.net/dNmNj/上看到它.

我的目的是清除浮子,#container使蓝色块(This Block)保持在黄色(不是粉红色)的正下方.然而,结果是它也清除了花车#navigation.

如何清除父容器的浮动而不是任何祖先容器？

Answer 1

您可以通过添加overflow:hidden到以下内容来实现您想要的效果#container:

http://jsfiddle.net/dNmNj/2

这是关于清除花车的好文章

http://www.quirksmode.org/css/clearing.html

但是你的蓝色div掉落的原因是因为#container div没有浮动 - 只剩下边距

以下显示了一个更加跨浏览器兼容的返工:

http://jsfiddle.net/dNmNj/3/