Поточная раскладка CSS
Нормальный поток (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).