Clearfix (устаревшее)

Вывод элементов через float: left считается устаревшим, и использование класса clearfix уже неактуален. Вместо float: left используют display: flex (использование Flexbox).

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

При использовании CSS-свойства float: left или float: right, элементы начнут выводиться не так, как ожидается.

<div class="items">
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
</div>

На примере выше видно, что родительский элемент с белым фоном «не покрывает» свои дочерние элементы. Чтобы страница выводилась как ожидалось, для родительского элемента надо добавить класс .clearfix.

<div class="items clearfix">
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
    <div class="item"><p><img src="image.jpg" alt=""></p><p>Пример картинки</p></div>
</div>

Некоторые верстальщики вместо использования «clearfix» указывают CSS-свойство overflow: hidden, что является неправильным, т.к. в этом случае, объекты, выходящие за пределы контейнера, становятся невидимыми. Например, стрелочки для слайдера, или стикеры («новинка», «хит») на карточках товаров.