关于float与非定位流式块级、行内元素重叠规则的疑问

参考CSS2.2视觉布局规范中的相关描述：

当这种情况发生时，float会渲染在非定位流式块级元素的前方，但位于流式行内元素的后方。

我不确定自己的理解是否正确，因此列举了一些示例。

关于“float位于流式行内元素后方”的验证 #

behind in-flow inlines：存在一个span和float，float位于span后方。我认为这部分是正确的。

.left {
  float: left;
}

.test {
    background: rgba(155, 155, 155, 0.5);
    margin-left: -50px;
    padding: 10px;
    font-size: 24px;
}

<span class="left" style="background-color: red; padding: 10px">
  Some have gone and some remain
</span>
<span class="test">
 In my life, I've loved them all
</span>

关于“float渲染在非定位流式块级元素前方”的困惑 #

但对于floats are rendered in front of non-positioned in-flow blocks这句话，我感到有些困惑。

float盒子的background和border确实位于blocks盒子的前方，但内部文本却并非如此。

.left {
  float: left;
}

.test1 {
  height: 30px;
  border: 1px solid red;
  background: red;
  margin-right: -30px;
  border: 3px solid green;
  font-size: 12px;
}

.test2 {
  background-color: rgba(155, 155, 155, 0.5);
  margin-right: -20px;
  padding: 10px;
  font-size: 18px;
  border: 2px dashed black;
  font-weight: bold;
}

<p class="left test1">
Some have gone and some remain
</p>
<p class="test2">
In my life, I've loved them all
</p>

根据我目前查阅的规范，我不清楚出现这种情况的原因，也不确定我的示例是否正确，特此请教。

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