Какие элементы выпадают из потока документа?

Что такое поток документа и как из него выпадают элементы

Поток документа — это естественный порядок отображения элементов на странице, где каждый блочный элемент располагается под предыдущим, а строчные — рядом. Некоторые CSS-свойства позволяют извлечь элемент из этого потока, что меняет поведение окружающих элементов.

Основные способы выпадения из потока

• position: absolute — элемент позиционируется относительно ближайшего позиционированного предка (или body), полностью выпадая из потока. Соседние элементы занимают его место.
• position: fixed — аналогично absolute, но привязывается к окну браузера, оставаясь на месте при прокрутке.
• float: left/right — элемент смещается влево или вправо, а текст и строчные элементы обтекают его. Сам элемент выпадает из потока, но его содержимое может влиять на высоту родителя (требуется clearfix).

Пример кода

<div style="position: relative; height: 100px;">
  <div style="position: absolute; top: 0; left: 0;">Абсолютный</div>
  <div>Обычный блок</div>
</div>
<div style="float: left; width: 50px;">Плавающий</div>
<p>Текст обтекает плавающий элемент.</p>

Вывод

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