Recientemente encendíun interesante artículo sobre la propiedad CSS z-index. Lo encontré porque estaba buscando una respuesta sobre por qué el texto desbordado de un div anterior se mostraba sobre el fondo de un div siguiente pero no sobre el fondo de un intervalo en el siguiente div, como aquí (jsfiddle):

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

La explicación de esto es el hecho de que un navegador dibuja elementos en un orden específico, que se basa en el llamado orden de apilamiento:

Entonces, para el elemento raíz en un diseño y cada elemento posicionado, el navegador crea dicho orden de apilamiento y luego dibuja todos estos pedidos, perdón por el juego de palabras, el orden respectivo.

Entonces esta es la razónelementos en línea y texto (los que creancajas en línea) se dibujan sobre los elementos de nivel de bloque, incluso si estos elementos de bloque aparecen más adelante en un documento, como en mi jsfiddle de arriba.

Entonces la pregunta en sí.

Todavía no puedo encontrar una respuesta por qué estoscajas en línea, si se crean, los elementos en línea y el texto dentro de un elemento flotante no se dibujan con otros cuadros en línea que están fuera del elemento flotante de acuerdo con el esquema del orden de apilamiento anterior, como aquí (jsfiddle):

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

Aquí puede ver claramente que el texto del primer div del documento, que no está flotando, se dibuja arriba (después) del fondo amarillo del tramo, mientras que el tramo es un elemento en línea y de acuerdo con la imagen del orden de apilamiento anterior se supone que debe dibujarse después del contenedor flotante (su fondo y bordes).

Entonces, ¿alguien tiene una explicación comprobada para esto? Supongo que los elementos flotantes crean algo así como su propio orden de apilamiento, como lo hacen los elementos posicionados, pero todavía no he encontrado ninguna mención de esto en la web.