Недавно я осветилинтересная статья о свойстве CSS z-index, Я нашел это, потому что искал ответ о том, почему переполненный текст из предыдущего div был показан над фоном следующего div, но не над фоном span в следующем div, как здесь (jsfiddle):

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

Это объясняется тем, что браузер рисует элементы в определенном порядке, который основан на так называемом порядке размещения:

Таким образом, для корневого элемента в макете и каждого позиционируемого элемента браузер создает такой порядок размещения, а затем рисует все эти порядки, извините за каламбур, в соответствующем порядке.

Так вот почемувстроенные элементы и текст (те, которые создаютвстроенные коробки) рисуются над элементами уровня блока, даже если эти элементы блока появляются позже в документе, как в моем jsfiddle выше.

Так что сам вопрос.

Я до сих пор не могу найти ответ, почему этивстроенные коробкиесли они созданы, для встроенных элементов и текста внутри плавающего элемента не отображаются другие встроенные блоки, находящиеся вне плавающего элемента в соответствии со схемой порядка размещения выше, как здесь (jsfiddle):

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

Здесь вы можете ясно видеть, что текст из первого элемента div в документе, который не является плавающим, рисуется над (после) желтым фоном диапазона, тогда как диапазон является встроенным элементом и в соответствии с изображением порядка наложения выше должен быть нарисован после плавающего контейнера (его фон и границы).

Так есть ли у кого-нибудь доказанное объяснение этому? Я предполагаю, что плавающие элементы создают что-то вроде своего собственного порядка размещения, как это делают позиционированные элементы, но я пока не нашел упоминаний об этом в сети.