Ответ
Контекст форматирования (formatting context) в CSS определяет, как элементы располагаются внутри контейнера. Основные типы:
-
Блочный контекст форматирования (BFC) - создается элементами с
display: block,flex,grid,table,inline-block, или приoverflow: hidden,float,position: absolute/fixed. -
Флекс-контекст - создается
display: flex. -
Грид-контекст - создается
display: grid.
Пример BFC:
.container {
overflow: hidden; /* Создает BFC */
}BFC изолирует содержимое, предотвращает "схлопывание" margin'ов и обтекание float'ов.
Ответ 18+ 🔞
А, ну это про эти ваши контексты форматирования, да? Ну, слушай, сейчас объясню, как есть, без этих заумных учебников.
Представь себе, блядь, что каждый элемент на странице — это такой мудак, который живёт в своей квартире. И квартира эта — его контекст форматирования. Это правила, по которым он внутри своей хаты вещи расставляет и с соседями общается.
И вот этих правил, этих «контекстов», несколько видов, как сортов говна:
1. Блочный контекст форматирования (BFC)
Это как самая распространённая, блядь, общага. Создаётся она легко — проще пареной репы. Достаточно элементу сказать display: block, или flex, или grid. Или, что самое весёлое, поставить ему overflow: hidden. Это как взять и заварить дверь в соседнюю комнату — всё, теперь твой внутренний бардак никого не ебёт, и соседские margin'ы к тебе не прилипают. Ещё float или position: absolute тоже такую изоляционную камеру создают. BFC — он как скандальная бабка, которая ни с кем не общается и всем говорит «иди нахуй».
2. Флекс-контекст
Ну, тут всё просто, ёпта. Сказал элементу display: flex — и пошло-поехало. Все его дети-пиздюки тут же выстраиваются в рядок и начинают слушаться папу-контейнера, который им раздаёт команды: justify-content, align-items. Красота, блядь, а не жизнь. Порядок, ебать его в сраку.
3. Грид-контекст
А это уже для продвинутых затейников, которые любят сеточки. display: grid — и твой контейнер превращается в тетрадку в клеточку, куда можно детей раскидать с хирургической, блядь, точностью. Хочешь — в первую колонку, хочешь — с третьей по пятую. Мощь, ебать!
А теперь смотри, зачем это всё нужно. Вот тебе классический пример, когда BFC спасает от пиздеца:
.container {
overflow: hidden; /* Вот эта строчка, сука, и создаёт BFC! */
}Что это даёт? А то, что всё, что внутри этого .container, теперь живёт в своём отдельном мирке. Внешние margin'ы не схлопнутся с внутренними, плавающие элементы (float) внутри не будут вылезать за пределы и ебать мозг всему вокруг. Это как надеть на буйного соседа смирительную рубашку — сиди и не рыпайся, блядь.
Короче, контекст форматирования — это просто правила общежития для HTML-элементов. Не хочешь, чтобы они друг другу мозг выносили — посели их в разные контексты. Всё гениальное просто, как три копейки, ёпта.