为何HTML中后定义的浮动元素不会与前置块元素重叠？

这个问题戳中了CSS浮动规则里很容易被忽略的细节——浮动元素的垂直位置并没有完全脱离正常流，咱们结合你的例子一步步拆解：

场景1：浮动元素在块元素之前（出现重叠） #

先看你的代码：

.left-box { background-color: green; float: left; padding:10px; }
.center { background-color: lightcoral; }

<div class="left-box">left box</div>
<div class="center"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates! </div>

现象原因： #

• 浮动元素.left-box在HTML中先出现，它的垂直起点就是正常流的顶部位置，然后向左浮动到容器边缘。
• 后面的.center是正常流中的块元素，CSS规范说非定位块元素垂直流动时“仿佛浮动元素不存在”——这里的“不存在”指的是块元素的宽度会填满整个容器（不会给浮动元素让位置），所以.center的背景会和.left-box的背景重叠；但块元素的内联内容（比如文字）会自动绕开浮动元素，这也是浮动最初用来实现文字环绕的原因。

场景2：浮动元素在块元素之后（无重叠，贴在底部） #

代码如下：

.left-box { background-color: green; float: left; padding:10px; }
.center { background-color: lightcoral; }

<div class="center"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae ad et ullam maiores tenetur deserunt amet laboriosam nemo delectus neque possimus nostrum, sint sequi, tempore praesentium eum tempora nulla cupiditate fugit natus repellendus explicabo? A praesentium vero debitis ab esse animi voluptatum iste totam illo fugiat suscipit, aliquid odio voluptates! </div>
<div class="left-box">left box</div>

现象原因： #

这才是最容易误解的点！很多人以为浮动元素可以随便“飘”到任何位置，但实际上：

• 浮动元素的垂直位置完全由它在HTML中的顺序决定——它在正常流中的位置是.center块元素的下方，所以即使设置了float: left，它也只能从这个垂直起点开始向左浮动，无法向上跨越前面的块元素。
• 你提到的“增加块元素高度或margin，浮动元素仍贴在底部”也验证了这一点：块元素的高度或margin只会让浮动元素的垂直起点后移，它依然只能从块元素结束的位置开始向左对齐。

核心规范依据 #

CSS规范对浮动元素的定位有明确规定：

浮动元素会被移出正常流的水平布局，但垂直方向上仍保持它在正常流中的原始位置，然后尽可能向左/右移动，直到碰到容器边缘、其他浮动元素或清除浮动的元素。

简单说：浮动只改变水平位置，垂直位置还是跟着HTML顺序走，不会脱离正常流的垂直布局。

内容的提问来源于stack exchange，提问作者happy_story