为什么浮动元素的背景看起来独立于内容而移动？

在下面的 CSS 代码中，背景似乎是divTwo已经落后了divOne。但内容divTwo似乎已被抛在后面 - 为什么 div 的背景似乎独立于内容移动？

#divOne {
  width: 300px;
  height: 100px;
  background-color: yellow;
  margin:5px;
  float:left
}
#divTwo {
  width: 300px;
  height: 100px;
  padding:5px;
  background-color: green;
}

<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>

结果在 Chrome 中

divTwo 的内容不是独立移动的。内容是文本，因此它呈现在line box.

现在，虽然未浮动、未清除的块会忽略它们前面的浮动元素的存在，但它们包含的行框不会。行框将避开浮动元素，并位于浮动元素旁边，或者如果没有空间，则位于浮动元素下方。

在您的示例中，旁边没有空格，因此文本位于浮动元素下方。但由于您为 divTwo 设置了固定高度，因此 divTwo 下方和内部也没有足够的空间用于行框。所以文字内容溢出divTwo，因此文本显示时后面没有 divTwo 的背景。