Плавающие элементы создают отдельный стековый контекст, например, позиционируемые?

Недавно я осветил интересную статью о свойстве 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 в документе, который не плавает, нарисован выше (после) желтого фона диапазона, тогда как span является встроенным элементом и в соответствии с изображением предполагается, что порядок укладки выше, после флотируемого контейнера (его фон и границы).

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

Ответ 1

CSS2.1 определяет порядок рисования элементов следующим образом:

В каждом контексте стекирования следующие слои окрашиваются в обратном порядке:

фон и границы элемента, образующего контекст укладки.

дочерние стекирующие контексты с отрицательными уровнями стека (в первую очередь отрицательные).

входящие, не-встроенные, не-позиционные потомки.
непозиционированные поплавки.

встроенные потоки inline-уровня, не связанные с ними, включая встроенные таблицы и встроенные блоки.

дочерние стекирующие контексты с уровнем стека 0 и позиционируемыми потомками с уровнем стека 0.

дочерние стекирующие контексты с положительными уровнями стека (сначала наименьшие положительные).

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

В каждом контексте стекирования позиционированные элементы с уровнем стека 0 (в слое 6), не позиционированные поплавки (уровень 4), встроенные блоки (уровень 5) и встроенные таблицы (уровень 5), окрашиваются так, как если бы эти элементы сами создавали новые контексты стекирования, за исключением того, что их позиционированные потомки и любые потенциальные контексты стека для детей принимают участие в текущем контексте стекирования.

Поскольку все элементы вашей скрипки участвуют в одном и том же контексте стекирования, а ваш плавающий элемент не расположен (# 4), встроенное содержимое переполняющего div (# 5) окрашено над плавающим элементом и его дочерними элементами, хотя плавающий элемент появляется позже в порядке источника.

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

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