我有一个包含两个浮动容器的布局:
<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
的浮动。
如何仅为父容器清除浮动,而不影响任何祖先容器?