Поток элемента в CSS описывает стандартное расположение элементов на странице в документе до применения позиционирования и других свойств.
Типы потока
- Нормальный поток — блоки располагаются сверху вниз, inline-элементы слева направо.
- Float поток — элементы выстраиваются слева или справа, обтекая другие элементы.
- Абсолютное позиционирование — элемент удаляется из потока и позиционируется относительно ближайшего предка с относительным позиционированием.
- Flex и Grid — создают собственный контекст потока для дочерних элементов.
Пример нормального потока
<div class="container">
<div class="header">Header</div>
<div class="content">Main content</div>
<div class="footer">Footer</div>
</div>
div.header, div.content, div.footer {
padding: 20px;
background: lightgray;
margin-bottom: 10px;
}Элементы следуют естественному потоку сверху вниз, занимая всю ширину контейнера.
Рекомендации
- Для управления потоком используйте
float,position, Flexbox и Grid. - Избегайте слишком сложного вложения без необходимости — это усложняет понимание потока.
- Понимание потока помогает правильно строить адаптивные и семантические макеты.