Understanding Block Formatting Contexts and Display Types in CSS
A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page. It defines how block boxes interact with each other, how floats are contained, and how margins collapse. Certain display values trigger the creation of a BFC.
display: block– Standard block-level elements participate in normal flow and may form a BFC under specific conditions.display: flow-root– Explicitly creates a new BFC, isolating its children from floats outside the element.display: flex/display: inline-flex– Flex containers create a BFC, which affects float containment and margin collapsing inside the container.display: grid/display: inline-grid– Grid containers also establish a BFC, affecting layout and containment of child elements.
In this example, display: flow-root creates a new BFC. Floated child elements do not overflow outside the container, and margins inside the container behave predictably.
Use BFC-triggering display types to contain floats and prevent overflow issues.
Consider
flow-rootwhen you want a block to self-clear its children.Flex and grid containers automatically create a BFC, so they also help with layout containment.
Understanding which display types create a BFC helps manage margin collapsing and element stacking.