BFCs

BFC stands for Block Formatting Context. It is a fundamental concept in CSS layout that describes how block-level boxes are laid out. A BFC is a region of the document that is formatted according to a specific set of rules, and it is isolated from its siblings and parent.

New BFCs are created in several situations, including when an element has a `display` value other than `none` such as `block`, `inline-block`, `table-cell`, `table-caption`, or `flex`, `grid`, and when an element has a `position` value of `absolute` or `fixed`. Additionally, elements with `overflow` values other than `visible`, `float` values other than `none`, and `contain` values other than `none` also establish a new BFC.

The primary function of a BFC is to contain floats. Elements that create a new BFC will not overlap with floats that appear next to them. This is often used to clear floats, preventing parent elements from collapsing when they contain only floated children. Another important characteristic is that margin collapsing does not occur between elements within the same BFC. Margins of adjacent elements within a BFC will stack rather than collapse.

Understanding BFCs is crucial for mastering CSS layout techniques, particularly for controlling spacing, preventing overlaps, and managing the flow of content on a web page.