Clearfix в HTML: для чего нужен и как работает

Быстрый ответ

Clearfix — это технический прием, которым можно обеспечить содержимое контейнера элементами с свойством float так, чтобы контейнер не схлопывался. Здесь приведен пример кода с использованием класса .clearfix:

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Целостность контейнера поддерживается. */
}

Этот трюк представляет собой простое и эффективное решение одной из распространенных проблем при работе с элементами, применяющими float.

Разбираемся с clearfix

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

Визуализация

Clearfix незаменим при организации элементов с плавающим выравниванием в пределах своего контейнера:

Без Clearfix:
Книжная полка 📚📚📘📙   📔📕  // Упс! Возник хаос.

Используем Clearfix:
Книжная полка 📚📚📘📙🔲📔📕  // Вот оно! Невидимый страж (🔲) восстанавливает порядок.

Clearfix действует как невидимый страж, который удерживает макет на месте и предотвращает перемешивание с другими элементами, которые обтекаются.

Когда использовать clearfix

Плавающие элементы – бунтари макета

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

Подробнее об этом расскажет наш спикер на видео

Знакомимся с новичками – Flexbox и Grid

Современные и мощные подходы к верстке, такие как Flexbox и Grid, предоставляют новые возможности и делают такие методы, как clearfix, менее важными.

Эра Flexbox и Grid

Использование Flexbox или Grid для создания макетов не только дает мощные инструменты для дизайна, но и обеспечивает стабильность и предсказуемость поведения макета в различных браузерах.

Альтернативы clearfix и лучшие практики

Новинка – display: flow-root

Новое свойство display: flow-root позволяет создавать контейнеры для элементов с плавающим выравниванием без привлечения дополнительных методов, подобных clearfix, или использования лишней разметки.

Учитываем пробелы с inline-block

Свойство display: inline-block также является альтернативой для элементов с float-выравниванием, однако необходимо учитывать пробелы между элементами и возможные сложности с вертикальным выравниванием, которые могут возникнуть в некоторых браузерах.

Sass и SCSS – поддерживаем код в чистоте

С помощью препроцессоров Sass или SCSS можно создавать @mixin или %clearfix, что поможет сохранить код чистым и легко поддерживаемым.

Эхо прошлого – поддержка старых браузеров

Технический хитрость с zoom: 1; когда-то использовалась для активации hasLayout в IE6/7, но эти времена ушли в прошлое, и в современных стратегиях дизайна нет необходимости учитывать эти особенности.

Практический пример использования clearfix

Прокомментированный пример применения clearfix:

.clearfix {
  &::after {
    content: "";
    display: block; /* Невидимый блок, обеспечивающий стабильность! */
    clear: both; /* Проблемы с float-элементами решены. */
  }
}

Применение класса .clearfix в контейнере, содержащем элементы с float-выравниванием, обеспечивает их корректное размещение:

<div class="clearfix">
  <div style="float:left;width:50%;"></div>
  <div style="float:right;width:50%;"></div>
</div>

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

Полезные материалы

1. The Clearfix: Force an Element To Self-Clear its Children | CSS-Tricks — Подробное рассмотрение принципов работы clearfix.
2. Clearing Floats: An Overview of Different clearfix Methods — SitePoint — Варианты реализации clearfix.
3. How To Clear Floats (Clearfix) — Подробное руководство по использованию clearfix в веб-дизайне.
4. css – What methods of ‘clearfix’ can I use? — Stack Overflow — Обсуждение разных вариантов clearfix и их альтернатив.
5. CSS Floats 101 — A List Apart — Глубокий анализ свойства float в CSS и обзор clearfix.
6. Tutorial | DigitalOcean — Изучение различных способов содержания плавающих элементов с использованием clearfix.