Чем полезен clearfix в CSS?

clearfix — это метод в CSS, который используется для устранения проблемы с обтеканием блоков в веб-дизайне. Когда вы используете плавающие элементы (с помощью свойства float), родительский контейнер может не расширяться по высоте, чтобы охватить эти элементы. Это происходит потому, что плавающие элементы выводятся из обычного потока документа. Вследствие этого могут возникать серьезные проблемы с компоновкой.

Проблема с обтеканием

Предположим, у нас есть следующий HTML-код:

<div class="container">
    <div class="box float-left">Левая</div>
    <div class="box float-right">Правая</div>
</div>

И CSS:

.container {
    background-color: lightgray;
}

.box {
    width: 45%;
    margin: 10px;
    padding: 20px;
    background-color: cadetblue;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

В этом случае, если вы не используете clearfix, высота контейнера .container будет равна нулю, так как плавающие элементы не влияют на высоту родителя.

Решение с использованием clearfix

Чтобы решить эту проблему, можно применить метод clearfix. Для этого мы создадим класс, который будет добавлять в родительский элемент необходимый стиль.

CSS для clearfix

.clearfix::after {
    content: ""; /* Псевдоэлемент */
    display: table; /* Создаем блок, чтобы обернуть плавающие элементы */
    clear: both; /* Очищаем обтекание */
}

Применение clearfix к контейнеру

Теперь добавьте класс clearfix к контейнеру:

<div class="container clearfix">
    <div class="box float-left">Левая</div>
    <div class="box float-right">Правая</div>
</div>

Теперь высота контейнера .container будет правильно устанавливаться, так как псевдоэлемент в классе clearfix будет «заботиться» о высоте родителя, растягивая его до высоты плавающих элементов.

Итог

Использование clearfix позволяет избежать проблем с компоновкой, возникающих при использовании плавающих элементов. Это хороший способ поддерживать чистоту вашего CSS и избегать сложных решений для исправления высоты контейнеров.

Постепенно становится обычной практикой добавлять clearfix к родительским элементам, содержащим плавающие дочерние элементы.