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

Контекст форматирования (formatting context) в CSS определяет, как элементы располагаются внутри контейнера. Основные типы:

1. Блочный контекст форматирования (BFC) - создается элементами с display: block, flex, grid, table, inline-block, или при overflow: hidden, float, position: absolute/fixed.

2. Флекс-контекст - создается display: flex.

3. Грид-контекст - создается display: grid.

Пример BFC:

.container {
  overflow: hidden; /* Создает BFC */
}

BFC изолирует содержимое, предотвращает "схлопывание" margin'ов и обтекание float'ов.