予期しない動作が：

Question

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>

を残し上記の例では、私はいくつかのことを理解していない：

緑のdivは、黄色の上に積層されているのはなぜ
1. div？
2. なぜ青いdivがどこにあり、黄色のdivがどこにあるのではなく、テキスト"Hello World"が印刷されていますか？

まだ浮かべ要素で撮影されたスペースを認めながら、私は、左側にその要素をプッシュし、何事もなかったかのようにレンダリングするために、次のすべての要素を持っているfloat: left;を理解しています。

だから私はこの予想：緑のdivの右側に

1. 黄色のdivを。
2. 緑色のdivのすぐ下の青色のdiv。
3. イエローdivには"Hello World"という文字が印刷されています。

Answer 1

のみコンテンツが浮動要素の周りにラップされ、他の（非インライン）の要素が...あなたの黄色<div>として

はブロック要素ではありません、それはあなたの浮かべ要素を「ラップアラウンド」ではないでしょう。以下に示すように

、あなたの黄色の要素にdisplay: inline-block;を追加します。

<div style="float: left; width: 400px; height: 400px; background-color: green;"></div> 
 
<div style="display: inline-block; width: 400px; height: 400px; background-color: yellow;">Hello World!</div> 
 
<div style="width: 400px; height: 400px; background-color: blue;"></div>