Clearing в CSS: как очистить обтекание float

Зачем нужен clear (clearing) в CSS?

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

Чтобы родитель «заметил» таких детей, нужно очистить обтекание (clearing).

Основные способы очистки float

Свойство clear

Добавляется к элементу после флотируемых.

<div class="clearfix"></div>

.clearfix {
  clear: both;
}

Это работает, но требует добавлять лишний HTML, что не всегда удобно.

Техника Clearfix (псевдоэлемент)

Наиболее популярный и универсальный способ.

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

Применяется к родительскому элементу, содержащему флотируемые дочерние блоки.

<div class="container clearfix">
  <div class="left-box" style="float: left;"></div>
  <div class="right-box" style="float: right;"></div>
</div>

Позволяет избежать добавления лишней разметки и автоматически очищает обтекание

Использование "overflow: hidden"

.container {
  overflow: hidden;
}

• Работает, потому что overflow создает новый блок форматирования (BFC), который включает флотируемые элементы в расчёт высоты.
• Минус: может обрезать содержимое с position: absolute или вылезающий за пределы блок.

Современные альтернативы — Flexbox и Grid

Если вы используете display: flex или display: grid, то обтекание вообще не требуется, потому что элементы остаются в потоке и не вызывают схлопывание родителя.

.container {
  display: flex;
}

Лучше использовать их вместо float, когда это возможно.