Загрузка...

Using CSS BFC to Solve Margin Collapse

What is Margin Collapse?
Margin collapse occurs when vertical margins of adjacent elements combine into a single margin (taking the larger value), which can cause unexpected layout results.

How BFC Prevents Margin Collapse
Creating a Block Formatting Context (BFC) establishes an independent layout environment where margins of elements inside cannot collapse with margins of elements outside the BFC.

Solution Methods:
Using overflow property

css
.container {
overflow: hidden; /* Creates BFC */
}
Modern approach with display: flow-root

css
.container {
display: flow-root; /* Cleanest BFC creation */
}

Видео Using CSS BFC to Solve Margin Collapse канала ZBU
Яндекс.Метрика
Все заметки Новая заметка Страницу в заметки
Страницу в закладки Мои закладки
На информационно-развлекательном портале SALDA.WS применяются cookie-файлы. Нажимая кнопку Принять, вы подтверждаете свое согласие на их использование.
О CookiesНапомнить позжеПринять