浮动和堆叠上下文

Question

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

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

1. 构成堆叠上下文的元素的背景和边框。
2. 具有负堆栈级别（最负优先）的子堆栈上下文。
3. 流入、非内联级别、非定位的后代。
4. 未定位的浮动。
5. 流入、内联级、非定位后代，包括内联表和内联块。
6. 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代。
7. 具有正堆栈级别的子堆栈上下文（最不正的优先）。

...还有这个：

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

问题

• 当我们说“新的堆叠上下文”是由一个元素生成时，这是否意味着只有它自己及其后代（子/包含）元素根据新的堆叠上下文进行排序，并且整个新的堆叠上下文与根的堆叠上下文（假设没有其他上下文）一起（原子地）排序？
• 在下面的代码中，我有一个浮动、非内联/非定位根的后代，以及内联级/非定位后代。无论如何，浮动没有画在非内联级（块级）框的顶部，正如规范似乎所说的那样。只有背景被画在上面。这是为什么呢？

.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>

Answer 1

对于第二个问题，如果我们检查painting order，我们将有以下顺序：

4. 对于所有按树顺序排列的流入、非定位、块级后代：
5. 如果元素是块、列表项或其他等效块：元素的背景颜色。

所以现在我们已经绘制了块元素.new的背景色

5. 所有未定位的浮动后代，按树顺序排列。对于其中的每一个，将元素视为创建了一个新的堆叠 上下文，但任何定位的后代和实际上 创建一个新的堆叠上下文被认为是父级的一部分 堆叠上下文，而不是这个新的。

所以现在我们已经绘制了所有元素 .float（背景和内容），因为它创建了自己的堆叠上下文。因此，我们应该考虑绘制顺序规则来绘制其中的所有内容，然后我们将移动到下一个元素。

1. 否则：首先是元素，然后是其所有流入的、非定位的、块级的后代（按树顺序）：
   1. ...

这一步我们将绘制.new元素和内联元素.old的内容

---

所以诀窍在于.new 元素分两个不同的步骤绘制，首先是背景，然后是内容。在这些步骤之间，我们绘制了浮动元素。