<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>
在上面的例子中,我不明白一些事情:
"Hello World"
打印在蓝色div的位置,而不是黄色div的位置?我理解float: left;
将该元素推向左边并让所有以下元素呈现,好像什么也没发生,同时仍然确认浮动元素占用的空间。
所以我期待这个:
"Hello World"
印在黄色div上。答案 0 :(得分:0)
只有内容环绕浮动元素,其他(非内联)元素不包含......
由于您的黄色<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>