9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than" visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
the block formatting context is created in the following ways:
root element or element containing root element
floating element (element"s float is not none)
absolute positioning element (element"s position is absolute or fixed)
inline block element (element"s display is inline-block)
table cell (element"s display is table-cell,HTML table cell defaults to this value)
table header (element"s display is table-caption,) HTML table title defaults to this value)
Anonymous table cell element (display of element is table, table-row, table-row-group, table-header-group, table-footer-group (default attribute of HTML table, row, tbody, thead, tfoot, respectively) or inline-table)
Block element whose overflow value is not visible
element whose display value is flow-root
contain value is layout, Element of content or strict
Elastic element (display is a direct child of the flex or inline-flex element)
Grid element (display is a direct child of the grid or inline-grid element)
Multi-column container (the column-count or column-width of the element is not auto, An element whose column-count is 1)
column-span is all always creates a new BFC, even if the element is not wrapped in a multi-column container (standard change, Chrome bug).
above is the specification, and below is the MDN document