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