オーバーフローが隠れている浮遊要素がコンテナをエスケープするのはなぜですか？

Question

ウェブページでよく見られる問題は、フローティングdivがコンテナの外に這うことです。

#wrapper{ 
    border:1px solid red; 
} 

#wrapper div{ 
    float:left; 
    font-size: 3em; 
} 
... 
<div id="wrapper"> 
    <div>Hello World</div> 
</div> 

ライブ例：http://jsfiddle.net/ugUVa/1/

この（明らかにdiv要素を挿入：両方）を修正する汚い方法はたくさんあり、私が見てきた

ずっとすっきり解決策は、ラッパーdivを設定しています隠さへオーバーフローのスタイル：

例：http://jsfiddle.net/ugUVa/2/

これはきれいに素敵で、ブラウザ間でうまく動作します追加のマークアップはありません。私は幸せですが、なぜそれが機能するのか分かりません！

私が見てきたすべてのドキュメントは、オーバーフローを示します。隠されたその子に合うように、親のサイズ変更、コンテンツのない隠すためである...

誰もが、この動作の説明を提供することはできますか？

おかげ

Answer 1

それはblock formatting contextを作成します。

ブロックの書式設定コンテキストは、浮動小数点の配置（float参照）およびクリア（clear参照）に重要です。 の位置付けと浮動小数点数のクリアの規則は、同じブロック内のものにのみ適用されます。 書式設定のコンテキスト。浮動小数点数は他の ブロック書式設定コンテキストのもののレイアウトには影響しません。また、clearは同じブロック書式設定コンテキストの で過去の浮動小数点数をクリアします。

も参照してください。http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

それはoverflowスタイルがあふれコンテンツに何が起こるかを制御することが意図されていることが正しいのです。

浮動要素への影響は、要素のブロック書式コンテキストを作成するoverflowスタイルの副作用です。

包含する要素のサイズを指定しない場合、ブロック書式設定コンテキストは、その要素が含む要素からそのサイズを取得します。したがって、包含する要素のサイズが取得されます。