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

Контекст форматирования (Formatting Context) — это часть визуального CSS-рендеринга, определяющая, как элементы располагаются внутри контейнера. Бывает нескольких типов:

1. Блочный (BFC) — изолирует содержимое, влияет на margin collapsing и обтекание float.
2. Строчный (IFC) — управляет расположением inline-элементов и текста.
3. Грид (GFC) и Флекс (FFC) — для соответствующих layout-моделей.

Пример создания BFC:

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

Особенности BFC:

• Элементы выстраиваются вертикально
• Margin'ы не схлопываются с внешними элементами
• Содержит внутренние float'ы