Clearfix

Проблема родом из времён, когда колонки и сетки товаров верстали через float. Плавающий элемент выпадает из обычного потока: родитель его как бы не видит. Если внутри контейнера только плавающие блоки, высота контейнера становится нулевой — фон и рамка исчезают, а следующий за ним блок наезжает на содержимое.

Clearfix — набор строк CSS, который добавляет в конец контейнера невидимый элемент с очисткой обтекания. Браузер обязан опустить такой элемент ниже всех плавающих соседей, и контейнер растягивается до него. Сам механизм очистки подробно описан в статье «Очистка обтекания».

Классический код и современная замена

/* Классический clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Современный способ — без хака */
.gallery {
  display: flow-root;
}

Первый вариант использует псевдоэлемент ::after, поэтому в разметку ничего добавлять не нужно — достаточно повесить класс. Второй вариант решает задачу напрямую: display: flow-root создаёт для блока новый контекст форматирования, а такой блок всегда охватывает свои плавающие элементы. Его поддерживают все современные браузеры.

Раньше вместо clearfix часто писали overflow: hidden. Это тоже работает, но обрезает всё, что выходит за границы: тени, выпадающие меню, всплывающие подсказки. Отсюда классическая ошибка «пропало меню в шапке».

Где он нужен сегодня

Для раскладки колонок и карточек float больше не используют — это работа для Flexbox и Grid, и в них clearfix не нужен вовсе. Но обтекание никуда не делось там, где оно уместно по смыслу: картинка слева от текста статьи. В WordPress выравнивание изображения влево или вправо в записях классических тем реализовано классами alignleft и alignright с плавающим позиционированием. Если запись короткая, а картинка высокая, картинка вылезает из блока записи на комментарии или подвал — и здесь пригождается clearfix или flow-root на контейнере контента. Класс .clearfix по-прежнему есть и в Bootstrap как вспомогательный.