Describe Block Formatting Context (BFC) and how it works.
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with overflow other than visible (except when that value has been propagated to the viewport) establish new block formatting contexts.
Without a BFC, the containing box will not contain floated children. This is similar to collapsing margins, but more insidious — you will find entire boxes collapsing in odd ways.
A BFC is an HTML box that satisfies at least one of the following conditions:
- The value of
floatis notnone. - The value of
positionis neitherstaticnorrelative. - The value of
displayistable-cell,table-caption,inline-block,flex,inline-flex,grid, orinline-grid. - The value of
overflowis notvisible.
In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on collapsing margins.