Detailed explanation
Normal flow is the default system CSS uses to lay out content when special positioning or layout rules do not override it. In a typical horizontal writing mode, block-level boxes stack vertically, while inline content forms lines within its container. Floats and absolutely positioned boxes are taken out of normal flow, although floats still affect nearby line boxes. A block formatting context, or BFC, is not an alternative to normal flow: it is a layout context in which block boxes and floats interact according to specific rules.
A BFC establishes a boundary for float interactions and certain margin-collapsing behaviour. Floats inside it affect its own content rather than content in an outside formatting context. Conversely, an element establishing a BFC does not let its border box overlap floats in the surrounding BFC; it may become narrower or move below them. For a block-level BFC root with automatic height, floated descendants participating in that BFC are included when calculating its height. This explains why a container can appear to have no content height when all its children float, but expands after becoming a BFC root.
Common BFC triggers include display: flow-root, display: inline-block, floating an element, and absolute positioning. On a block container, overflow: hidden, auto, or scroll also establishes a BFC; overflow: clip alone does not. In the example, .container { overflow: hidden; } makes the container enclose its floated image. However, it can also clip overflowing content. For float containment without clipping or scrolling side effects, display: flow-root is usually the clearest choice. Flex and grid containers establish their own formatting contexts, not BFCs, although they provide some similar isolation behaviours.
Margin containment needs careful wording: a BFC prevents margins of its in-flow children from collapsing with the BFC root's margins. It does not disable every margin collapse; adjacent block siblings inside it can still have collapsing margins, and its own outer margins may collapse with neighbouring blocks. Interviewers look for this distinction, the relationship between BFC and normal flow, and a practical explanation of why flow-root is preferable to using overflow purely as a layout fix.
Key points to remember
- Normal flow describes default layout; a BFC defines a context for block layout and float interactions.
- A BFC root with automatic height encloses floated descendants participating in its BFC.
- A BFC boundary prevents parent–child margin collapsing, not all margin collapsing.
- Common triggers include flow-root, inline-block, floats, absolute positioning, and suitable overflow values.
- Use display: flow-root for explicit float containment without overflow clipping or scrollbars.
Common mistakes candidates make
- Describing a BFC as something that removes an ordinary block container from normal flow.
- Claiming that no margins collapse anywhere inside or outside a BFC.
- Using overflow: hidden without considering clipping, or assuming overflow: clip also creates a BFC.
Likely follow-up questions
Does display: flow-root take an element out of normal flow?
No: an otherwise ordinary flow-root block remains in normal flow while establishing a new BFC for its contents. Other BFC triggers, such as floating or absolute positioning, separately take the element out of normal flow.
How does a clearfix differ from display: flow-root?
A traditional clearfix adds a generated block after the floated content with clear: both, making the container extend below the floats. display: flow-root establishes a BFC directly and does not need an extra pseudo-element.
Can two children inside a BFC still have collapsing margins?
Yes, adjoining vertical margins of eligible in-flow block siblings can still collapse. The BFC boundary prevents its children's margins from collapsing with the BFC root's margins, rather than disabling margin collapsing throughout the subtree.
Interview tip: Start by saying that a BFC is a context within the layout system, then demonstrate float containment and qualify the margin-collapsing rule.