css - 为父容器而不是祖先清除浮动？

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.

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