Контекст форматирования

Каждый блок на странице не только сам где-то стоит, но и задаёт правила для своих детей. В обычном блоке дети выстраиваются сверху вниз, во флекс-контейнере — вдоль оси, в гриде — по ячейкам сетки. Этот набор правил и называется контекстом форматирования. Спецификация CSS описывает несколько видов: блочный (BFC), строчный (для текста и строчных элементов), флекс и грид. Таблицы и многоколоночная вёрстка устроены по своим законам.

На практике чаще всего говорят о блочном контексте, потому что от него зависят три старые головные боли вёрстки: обтекание, схлопывание отступов и «выпадающие» дочерние элементы.

Что даёт новый блочный контекст

• Он вмещает в себя плавающие элементы: родитель растягивается по высоте картинки с float, а не обрывается раньше неё.
• Внешние отступы его детей не схлопываются с отступами самого родителя и не «выходят» за его пределы.
• Сам блок не залезает под соседний float, а встаёт рядом, сужаясь.

Новый блочный контекст создают корневой элемент, плавающие и абсолютно позиционированные блоки, inline-block, ячейки таблиц, элементы флекс- и грид-контейнеров, блоки с overflow, отличным от visible и clip, а также contain: layout или paint.

Пример: замена clearfix одной строкой

.article-body {
  display: flow-root;
}
.article-body img.alignleft {
  float: left;
  margin: 0 16px 8px 0;
}

Значение display: flow-root существует ровно для того, чтобы создать блочный контекст без побочных эффектов. Раньше то же самое делали через overflow: hidden, которое обрезало тени и выпадающие меню, или через clearfix с псевдоэлементом. Пример типичен для текстов из визуального редактора WordPress, где картинка с выравниванием влево иначе вылезает за нижний край блока статьи.

Флекс и грид: свои правила

Внутри флекс- и грид-контейнера обтекание не работает, а отступы детей не схлопываются — это уже другие контексты. Поэтому привычный приём с float внутри флекс-ряда ничего не делает. Какой контекст получит блок, зависит прежде всего от значения свойства display у него и у родителя.