使用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;将该元素推向左边并让所有以下元素呈现，好像什么也没发生，同时仍然确认浮动元素占用的空间。

所以我期待这个：

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

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>