BFC

05 Jul 2023 . css .

A block formatting context is an HTML box that satisfies at least one of the following conditions:

  • The value of float is not none.
  • The value of position is neither static nor relative.
  • The value of display is table-cell, table-caption, inline-block, flex, or inline-flex.
  • The value of overflow is not visible.

Collapse margins

<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.