浮动和堆叠上下文

Question

作为背景，以下是W3C的CSS2.1规范chapter 9中的两个相关部分。

  

在每个堆叠上下文中，绘制了以下图层   从前到后的订单：

     

  
1. 构成堆叠背景的元素的背景和边框。
  
2. 子堆叠上下文具有负堆栈级别（最多为负数）。
  
3. 流入的，非内联级别，未定位的后代。
  
4. 未定位的花车。
  
5. in-flow，内联级别，非定位后代，包括内联表和内联块。
  
6. 堆叠级别为0的子堆叠上下文和堆栈级别为0的已定位后代。
  
7. 具有正堆栈级别的子堆叠上下文（最少积极的第一个）。
  

......而且这个：

  

在每个堆叠上下文中，堆栈级别为0的定位元素   （在第6层中），非定位浮体（第4层），内联块（层）   5）和内联表（第5层）被绘制成好像那些元素   他们自己生成了新的堆叠上下文，除了他们的   定位后代和任何可能的儿童堆叠上下文   参与当前的堆叠环境。

问题

• 当我们说元素生成“新堆叠上下文”时，这是否意味着ONLY本身及其后代（子/包含）元素是根据新的堆叠上下文排序的，并且表示全新的堆叠使用根的堆叠上下文（假设没有其他上下文）来排序（原子地）上下文？
• 在下面的代码中，我有一个float，非内联/非定位的root后代，以及内联级/非定位后代。无论如何，浮动没有绘制在非内联级（块级）框的顶部，因为规范似乎应该说它应该。只有背景画在上面。那是为什么？

.float {
  background-color: red;
  margin-right: -25px;
  border: 5px solid green;
  float: left;
  color: gray;
  font-size: 5rem;
}
.old {
  background: aqua;
  font-size: 3rem;
}
.new {
  background: yellow;
  font-size: 3rem;
}

 <span class="old">tesssss</span>
 <div class="float">testTwo</div>
 <div class="new">foo</div>