Recentemente eu acendium artigo interessante sobre a propriedade CSS z-index. Encontrei-o porque estava procurando uma resposta sobre por que o texto excedente de uma div anterior foi exibido acima do plano de fundo de uma div a seguir, mas não acima do plano de fundo de um período na div a seguir, como aqui (jsfiddle):

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

A explicação para isso é o fato de um navegador desenhar elementos em uma ordem específica, baseada na chamada ordem de empilhamento:

Portanto, para o elemento raiz em um layout e todos os elementos posicionados, o navegador cria essa ordem de empilhamento e, em seguida, chama todas essas ordens, desculpe pelo trocadilho, a respectiva ordem.

Então é por issoelementos e texto embutidos (aqueles que criamcaixas embutidas) são desenhados acima dos elementos no nível do bloco, mesmo que esses elementos apareçam posteriormente em um documento, como no meu jsfiddle acima.

Então a própria pergunta.

Ainda não consigo encontrar uma resposta por que essescaixas embutidas, se eles forem criados, para elementos embutidos e texto dentro de um elemento flutuante não são desenhados com outras caixas embutidas que estão fora do elemento flutuante, de acordo com o esquema da ordem de empilhamento acima, como aqui (jsfiddle):

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

Aqui você pode ver claramente que o texto da primeira div do documento, que não é flutuante, é desenhado acima (depois) do fundo amarelo da extensão, enquanto a extensão é um elemento embutido e de acordo com a imagem da ordem de empilhamento acima deve ser desenhado após o contêiner flutuado (fundo e bordas).

Então, alguém tem uma explicação comprovada para isso? Suponho que elementos flutuantes criem algo como sua própria ordem de empilhamento, como os elementos posicionados, mas ainda não encontrei nenhuma menção a isso na Web.