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
, что является неправильным, т.к. в этом случае, объекты, выходящие за пределы контейнера, становятся невидимыми. Например, стрелочки для слайдера, или стикеры («новинка», «хит») на карточках товаров.
Поддержать автора