Поточная раскладка CSS

Нормальный поток (normal flow) или поточная раскладка (flow layout), это способ отображения блочных (block) и строчных (inline) элементов на странице. Сначала раскладка этих элементов происходит согласно правилам потока, после чего в неё могут быть внесены изменения, например, относительное позиционирование.

По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность вынимается из потока (out of flow), то она работает независимо.

В нормальном потоке строчные (inline) элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (writing mode) документа. Блочные (block) элементы отображаются один за другим, также как параграфы в соответствии с режимом письма документа. Поэтому в английском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.

Пример

Следующий пример показывает боксы уровня блока (block level) и уровня строки (inline level). Боксы уровня блока участвуют в блочном контексте форматирования, а боксы уровня строки в строчном контексте форматирования.

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

Первое предложение также содержит элемент span с голубым фоном. Он создаёт бокс уровня строки и, следовательно, размещается внутри предложения.

Руководства

Ссылки

Записи глоссария