意外行为：左

<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;将这个元素推到左边，并且让所有下面的元素渲染，就好像什么都没发生一样，同时仍然确认浮动元素所占用的空间。

所以我预计：绿色div的右侧

黄格。
绿色div下的蓝色div。
将文字"Hello World"印在黄色的div上。

来源

2017-07-02 Novice

你错过了一个关键点：一个浮动元素后的元素将绕流它 – bhv

这是HTTPS的精确副本：//stackoverflow.com/questions/40264773/understanding-css-float，但我不能拿出任何一个问题的好标题。 – BoltClock

@bhv：这句话很模糊。定义“元素将流动”。 – BoltClock

只有内容是围绕浮动元素包裹，其他（非在线）元素不...

由于贵黄<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>

来源

2017-07-02 03:47:15

谢谢你的回答。 'p'标签也是一个块元素，但是漂浮在周围。（https://jsfiddle.net/41kdv7zL/） – Novice

不是，它不是浮动的，它只是更大，因为你没有指定它的大小... –

顺便说一下，只有内容环绕浮动元素，其他（非内联）元素不... –

意外行为：左

回答

相关问题