Контекст форматирования
BFC — область, в которой блочные боксы раскладываются по своим правилам: floats не вылезают наружу так же, margin collapse ограничивается границей BFC и т.д.
Создаётся, например:
overflow ≠ visible (классика);display: flow-root (явный современный способ);display: flex|grid (свой formatting context);position: absolute|fixed;float ≠ none.
Практический смысл clearfix: новый BFC «содержит» floats. Также BFC не даёт внешним float «затекать» внутрь в привычном смысле обтекания.
