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.