html - float 元素是否像定位元素一样创建单独的堆叠上下文？

Question

最近我点亮了 an interesting article about the CSS z-index property .我找到它是因为我正在寻找一个答案，说明为什么前一个 div 的溢出文本显示在后一个 div 的背景之上，但不显示在后一个 div 的跨度背景之上，就像这里 ( jsfiddle ):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#non-floated {
  background-color: pink;
  width: 300px;
}
#non-floated span {
  background-color: yellow;
}

对此的解释是浏览器以特定顺序绘制元素，这基于所谓的堆叠顺序:

因此对于布局中的根元素和每个定位元素，浏览器创建这样的堆叠顺序，然后绘制所有这些顺序，抱歉双关语，各自的顺序。

所以这就是为什么内联元素和文本(那些创建内联框的元素)被绘制在 block 级元素之上，即使这些 block 元素出现在文档的后面，就像在我上面的 jsfiddle 中一样。

---

所以问题本身。

我仍然找不到答案，为什么这些内联框，如果它们被创建，内联元素和 float 元素内的文本没有根据 float 元素之外的其他内联框绘制上面堆叠顺序的方案，就像这里 ( jsfiddle ):

#overflowed {
  background-color: green;
  width: 300px;
  height: 100px;
}
#floated {
  background-color: pink;
  width: 300px;
  float: left;
}
#floated span {
  background-color: yellow;
}

在这里你可以清楚地看到，文档中第一个 div 的文本，它不是 float 的，绘制在 span 的黄色背景之上(之后)，而 span 是一个内联元素，并且根据上面的堆叠顺序应该在 float 容器(它的背景和边框)之后绘制。

那么有人对此有可靠的解释吗？我想 float 元素会创建一些类似它们自己的堆叠顺序的东西，就像定位元素一样，但我还没有在网络上找到任何提及这一点的内容。

Answer 1

CSS2.1指定元素的绘制顺序如下:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

float 不会自行建立堆叠上下文。只有当它们位于 并且 的 z-index 不是自动的(不包括 any of the numerous other ways an element may do so )时，它们才会这样做。否则，它们将与其他元素(包括内联元素)参与相同的堆栈上下文，但需要注意以下事项(来自上面的同一链接):

Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

由于您的 fiddle 中的所有元素都参与相同的堆叠上下文，并且您的 float 元素未定位(#4)，因此溢出 div 的内联内容(#5)绘制在上方 float 元素 和 它的后代元素，即使 float 元素在源代码顺序中出现得较晚。

不过，溢出的 div (#1) 的 background 绘制在 float 的下方，因为根据上面的第二个引用，float 的背景被认为是 float 本身的一部分.你可以通过giving the float a negative margin看到这个:

#floated {
  background-color: pink;
  width: 300px;
  float: left;
  margin-top: -50px;
}