Css 仅清除父容器而不是祖先容器的浮动？

我有两个水平浮动容器的以下布局：

<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>

导航
块
块
这个街区

你可以现场观看

我的目的是清除

#容器的浮动，以便蓝色块（
此块
）位于黄色块（而不是粉色块）的正下方。但是，结果是它也清除了
#导航
的浮动

如何仅为父容器而不是任何父容器清除浮动？
您可以通过将
溢出：隐藏
添加到
#容器中来实现您想要的：


这是一篇关于清理浮动的好文章


但是您的蓝色div下降的原因是#container div没有浮动-只留下了边距

以下显示了更具跨浏览器兼容性的返工：

不确定这是否是您想要的：（将
溢出：隐藏
添加到
#容器中）是的，谢谢！这正是我想要的。您能解释一下溢出是如何影响浮动的吗？我们已经添加了一个答案-溢出隐藏的东西与浏览器有关hasLayout@Pete：嗯。。。不。首先，IE是唯一一款使用hasLayout的浏览器——如果它真的是hasLayout的问题，那么解决方案只能在IE上使用。老实说，我不知道溢出的原因，这只是我遇到的一个问题。但我从来没有使用过它，因为它在所有浏览器中都不起作用——这就是为什么我在回答我的问题时给出了解决办法provided@He石明：除了解释不正确<代码>溢出：隐藏
不清除浮动，这不是我上面提到的hasLayout问题，这里给出的两个示例在浏览器兼容性方面没有太大区别。@BoltClock，你能澄清一下
溢出：隐藏
在这种情况下做什么吗？我正在使用Chrome和IE8，我刚刚意识到这种布局在IE中不起作用。@Pete，跨浏览器版本在IE8中不太起作用。我会试着调查。我已经通过将宽度从50%减少到49%在IE中实现了这一点，我想这毕竟是一个舍入问题。可能是填充或边距问题，它们被添加到了宽度的顶部