CSS：浮動div要素は、非浮動DIV

Question

の内容に影響を与え、私はちょうどGoogleのCSSのチュートリアルをfinsishedました：http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/

サンプルファイル（ファイル：CSS-walkthrough.html）を使って実験した後、私はいくつかの奇妙な行動を発見しました私は説明できませんでした。

は、私は、コンテナのdivで3つのdivを持っている：

​​

我々持って期待通りにレンダリングfollwing CSS、：すべての3つのdivが「流れのうち、」取られ、1行に表示されます。コンテンツのスパンはdiv内にあります。

#wd-c div { 
    height: 150px; 
    border: 1px solid #222; 
    font-size: 150%; 
    font-weight: bold; 
    opacity: .7; 
} 

#wd-c div { width: 150px; } 
#wd-C#wd-1 { width: 50px; } /*for clarity*/  

#wd-1 { float: left } 
#wd-2 { float: left } 
#wd-3 { float: left } 

しかし、私はコメントを解除するとき：

/*#wd-3 { float: left }*/ 

DIV位WD-1及び＃WD-2まだ 'フローのうち' レンダリングされ、＃WD-3ブロック要素としてレンダリングされ、他と重複しています。

奇妙なことは、文字3の内容の範囲は、すべてのdivの下に表示され、＃wd-3の中にもうないことです。

＃wd-3の内容がフローティングdivの影響を受けるように見えますが、明らかに間違っています。例えば、私は＃WD-3の文字がちょうど重なって、フローティングのdiv＃のWD-2の横に、divの内側にレンダリング

#wd-C#wd-3 { width: 220px; } 

の幅を変更するとき..あなたは、任意の説明がありますか？

Answer 1

これはかなり論理的です。 floatは、position:absoluteのように、ドキュメントフローの該当要素を外していません。

通常、要素は浮動要素を「尊重」し、それに応じてコンテンツを表示しようとします。今度は3番目のdivのfloatを削除すると、float divの下に描画されます。ただし、浮動小数点型のdivコンテンツに干渉することなく、可能な限り次の場所にコンテンツをレンダリングしようとします。

固定幅と高さを宣言しているので、3番目のdivには浮動小数点divと「衝突」せずに内容を表示する場所がありません。なぜ内部span -Elementが浮動小数点divsの下にプッシュされるのですか？この要素の次の空き領域があります。

これはメカニックを少し説明してくれることを願っています。高さと幅を試してみてください。 （コメントアウトして）違いを確認してください。

Answer 2

3私はそれをフロートするときに#wd-3 div内にとどまりません。

#wd-3 divを親ブロック要素の制約のままにしたい場合は、#wd-c divにoverflow:hiddenを使用してください。