CSS float规则6疑问：负margin-top使浮动元素外顶部高于行框？

我理解CSS Float规则6的内容是元素浮动框的外顶部不得高于任何行框的顶部，补充说明提到元素浮动框的外顶部不得高于源文档中更早元素生成的包含框的任何行框的顶部。但我通过设置负margin-top，让浮动元素的外顶部高于了行框，对此存在困惑。

测试代码 #

CSS #

body {
  padding-top: 100px;
  width: 400px;
}

.left {
  float: left;
}

div {
  border: 1px solid red;
  height: 300px;
  padding: 80px 10px;
  box-sizing: border-box;
}

span {
  border: 1px solid red;
  margin: 0 10px;
}

.mt {
  margin-top: -100px;
}

HTML #

<div>
  <span> Because you don't know What it means to me Love of my life </span>
  <span>
    Is this the real life? Is this just fantasy?
    <img class="left mt" src="https://via.placeholder.com/50" alt="" />
  </span>
  <span
    >Each morning I get up I die a little Can barely stand on my feet Take a
    look in the mirror and cry Lord, what you're doing to me</span>
</div>

问题解答 #

CSS Float规则6的约束是针对元素在正常流中的初始布局位置——也就是说，浮动元素默认会与自身所在行框的顶部对齐，且不能高于之前元素的行框顶部。但负margin属于对元素位置的主动偏移，它会让元素脱离原本的正常流布局位置，这种偏移行为不受规则6的初始布局限制。

在你的测试场景里：

• img元素原本位于第二个span的行框内，正常浮动时顶部会和该行框顶部对齐；
• 设置margin-top: -100px后，元素整体向上偏移100px，此时它的外顶部自然会高于自身所在行框以及第一个span的行框顶部。这是负margin的位置偏移特性导致的，并非规则6失效。

简单总结：规则6管的是浮动元素“本该处于的初始位置”，而负margin是把它“主动挪到了超出初始范围的位置”，两者的作用逻辑互不冲突。

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