A block formatting context is an HTML box that satisfies at least one of the following conditions:
float
is not none
.position
is neither static
nor relative
.display
is table-cell
, table-caption
, inline-block
, flex
, or inline-flex
.overflow
is not visible
.<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
In a case where the margins of the siblings are different, then the higher margin will prevail because margins are overlapped. Use a new BFC to prevent margin collapse.