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

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

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

Пример

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

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

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

Руководства

• Блочная и строчная раскладки в нормальном потоке (Block and Inline Layout in Normal Flow).
• В потоке и вне потока (In Flow and Out of Flow).
• Объяснение контекстов форматирования (Formatting Contexts Explained).
• Поточная раскладка и режимы письма (Flow Layout and Writing Modes).
• Поточная раскладка и переполнение (Flow Layout and Overflow).

Ссылки

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

• Block (CSS)

1. CSS
2. CSS Reference