html - 使用 float : left 的意外行为

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>

在上面的例子中，有几点我没看懂:

1. 为什么绿色 div 堆叠在黄色 div 之上？
2. 为什么文本 "Hello World" 打印在蓝色 div 所在的位置，而不是黄色 div 所在的位置？

我理解 float: left; 将该元素推到左侧，并让所有以下元素呈现，就好像什么都没发生一样，同时仍然确认 float 元素占用的空间。

所以我预计会这样:

1. 绿色 div 右侧的黄色 div。
2. 蓝色 div 位于绿色 div 的正下方。
3. 文本 “Hello World” 打印在黄色 div 上。

Answer 1

只有内容环绕 float 元素，其他(非内联)元素不会...

作为你的黄色<div>是一个 block 元素，它不会“环绕”你的 float 元素。

添加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>