Что такое `clearfix` и `clearfix: both`?

Коротко

clearfix управляет тем, как элемент обтекается float-элементами (и, шире, как он «видит» floats слева/справа).

Значения:

• none — можно обтекать с обеих сторон (по умолчанию);
• left / right — нельзя оказаться рядом с float слева/справа, сдвигается вниз;
• both — нельзя рядом ни с левым, ни с правым float → элемент уходит под оба;
• inline-start / inline-end — логические аналоги для направлений письма.

Классический clearfix-трюк опирался на clear: both у псевдоэлемента ::after, чтобы контейнер «обнял» float-детей.

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

Сегодня чаще используют overflow / flex / grid вместо float-layout, но знание clear всё ещё спрашивают.