Очистка обтекания

Плавающий элемент с float: left прижимается к краю, а текст и строчные блоки обтекают его, как в журнальной вёрстке. Обтекание продолжается, пока плавающий блок не закончится по высоте. Если картинка выше абзаца, следующий заголовок тоже окажется сбоку от неё, хотя по смыслу должен начинать новый раздел. Свойство clear говорит браузеру: этот элемент должен начаться ниже всех плавающих блоков с указанной стороны.

Значения и пример

.post img.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.post img.alignright { float: right; margin: 0 0 1em 1.5em; }

.post h2 { clear: both; }   /* раздел всегда начинается под картинками */

• left — опуститься ниже блоков, плавающих слева;
• right — ниже плавающих справа;
• both — ниже любых;
• none — значение по умолчанию.

В современных браузерах есть и логические значения inline-start и inline-end, которые учитывают направление письма. Пример выше взят не случайно: классы alignleft и alignright WordPress добавляет картинкам с выравниванием в записях, и в классических темах они до сих пор работают на float. Именно в текстах статей очистка обтекания встречается чаще всего.

Очистка и содержащий блок

Есть вторая, родственная проблема. Если внутри блока только плавающие элементы, его высота становится нулевой: float не растягивает родителя, и фон или рамка «схлопываются». Раньше это лечили приёмом clearfix — добавляли в конец родителя псевдоэлемент с clear: both. Сейчас то же решает одна строка display: flow-root: она создаёт для блока новый контекст форматирования, и тот охватывает плавающих потомков.

Неочевидное поведение

• clear работает только для блочных элементов. Строчному span его задавать бесполезно.
• Внутри flex- и grid-контейнера float у дочерних элементов игнорируется, поэтому и очищать там нечего.
• Чтобы опустить элемент, браузер добавляет над ним промежуток. Из-за этого верхний внешний отступ очищаемого блока может «пропасть» — отступ лучше задавать нижним у плавающего элемента.

Колоночную раскладку на float и clear сейчас не делают: для этого есть Flexbox и Grid. Но для обтекания картинки текстом float остаётся единственным инструментом, а вместе с ним — clear и CSS-фигуры, которые позволяют обтекать не прямоугольник, а круг или многоугольник.