html - ¿Los elementos flotantes crean un contexto de apilamiento separado como lo hacen los posicionados?

css css-float

Question

Recientemente me acerqué a un artículo interesante sobre la propiedad del índice z de CSS . 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 tramo 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 tal orden de apilamiento y luego dibuja todas estas órdenes, perdón por el juego de palabras, el orden respectivo.

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

Así que la pregunta en sí .

Todavía no puedo encontrar una respuesta de por qué estos cuadros en línea , si se crean, para 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 según 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 de la primera división del documento, que no está flotando, se dibuja arriba (después) del fondo amarillo de la espada, mientras que el tramo es un elemento en línea y de acuerdo con la imagen del orden de apilamiento anterior se supone que se dibuja después del contenedor flotado (su fondo y bordes).

Entonces, ¿alguien tiene una explicación probada 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.

Answer 1

CSS2.1 especifica el orden de pintura de los elementos de la siguiente manera:

Dentro de cada contexto de apilamiento, las siguientes capas se pintan en orden de principio a fin:

1. El fondo y los bordes del elemento que forma el contexto de apilamiento.
2. los contextos de apilamiento de niños con niveles de pila negativos (primero los más negativos).
3. los descendientes en el flujo, no en el nivel en línea, no posicionados.
4. Los flotadores no posicionados.
5. los descendientes en el flujo, en el nivel en línea, no posicionados, incluidas las tablas en línea y los bloques en línea.
6. los contextos de apilamiento secundarios con nivel de pila 0 y los descendientes posicionados con nivel de pila 0.
7. los contextos de apilamiento de niños con niveles de pila positivos (menos positivos primero).

Los flotadores no establecen contextos de apilamiento por sí mismos. Solo lo harán si están posicionados y tienen un índice z que no es automático (sin contar ninguna de las muchas otras formas en que un elemento puede hacerlo ). De lo contrario, participan en el mismo contexto de apilamiento que otros elementos, incluidos los inlines, con la siguiente advertencia (desde el mismo enlace anterior):

Dentro de cada contexto de apilamiento, los elementos posicionados con nivel de pila 0 (en la capa 6), flotadores no posicionados (capa 4) , bloques en línea (capa 5) y tablas en línea (capa 5) se pintan como si esos elementos generaran nuevos elementos. contextos de apilamiento, excepto que sus descendientes posicionados y los posibles contextos de apilamiento secundarios tomen parte en el contexto de apilamiento actual.

Dado que todos los elementos en su violín están participando en el mismo contexto de apilamiento, y su elemento flotante no está posicionado (# 4), los contenidos en línea del div (# 5) desbordante están pintados sobre el elemento flotante y sus elementos descendientes, aunque El elemento flotante aparece más tarde en el orden de origen.

Sin embargo, el fondo de la división de desbordamiento (# 1) se pinta debajo del flotador, ya que el fondo del flotador se considera parte del mismo flotante de acuerdo con la segunda cita anterior. Puedes ver esto dando a la flotación un margen negativo :

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