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

Контекст форматирования (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'ов.