祖先ではなく、親コンテナのフロートをクリアしますか？

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

あなたの#containerにoverflow:hiddenを追加することによって、あなたが望むものを達成することができます

http://jsfiddle.net/dNmNj/2

これは清算についての良い記事は

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

を浮遊しているが、その理由は、あなたの青のdivがあります#container divがフローティングされていないためです - ちょうど余白が残ります

以下がよりクロスブラウザ互換性があり、リワークを示しています（ `オーバーフローを追加http://jsfiddle.net/dNmNj/2/：隠された

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