via: https://www.smashingmagazine.

com/2017/12/understanding-css-layout-block-
formatting-context/

You can think of a BFC as like a mini layout inside your page. Once an element
creates a BFC, everything is contained inside it. As we have seen, this includes
floated elements which no longer poke out of the bottom of the box. The BFC also
causes some other useful behavior.

how to create a BFC

overflow: auto

position: absolute or position: fixed

Using display: inline-block, display: table-cell or display: table-caption. The

table-cell and table-captions are the default for these HTML elements, so if you
have a data table for example, each cell will create a BFC.

column-span: all

## important side effects caused by BFC

A Block Formatting Context indicates that the item is participating in Block
Layout, a Flex Formatting Context means the item is participating in Flex layout.
In practice, the result is the same, floats are contained and margins do not
collapse.

```
You would use display: flow-root in any of the situations in this article where
creating a new BFC would be advantageous - to contain floats, to prevent margins
collapsing, or to prevent an item wrapping a float.
```