<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 堆叠在黄色 div 之上？
- 为什么文本
"Hello World"打印在蓝色 div 所在的位置，而不是黄色 div 所在的位置？
我理解 float: left; 将该元素推到左侧，并让所有以下元素呈现，就好像什么都没发生一样，同时仍然确认 float 元素占用的空间。
所以我预计会这样:
- 绿色 div 右侧的黄色 div。
- 蓝色 div 位于绿色 div 的正下方。
- 文本
“Hello World”打印在黄色 div 上。
最佳答案
只有内容环绕 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>关于html - 使用 float : left 的意外行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44867197/