[csswg-drafts] [css2.2] Section 9.4.1's definition of a BFC is an oversimplification (#12524)

kannanwisen has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css2.2] Section 9.4.1's definition of a BFC is an oversimplification ==
Hello CSS Working Group,

This issue is to discuss a potential clarification for the definition of a Block Formatting Context (BFC) found in the CSS 2 specification, section 9.4.1.

The current text states:

    In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

While this sentence serves as a basic introduction to the normal flow, it is a significant oversimplification that can be misleading. It does not account for several critical layout behaviors that can occur within a BFC.

**Points of Inaccuracy:**

1.  **Inline-level Content:** The statement completely ignores the presence of inline-level boxes (inline, inline-block, etc.). These boxes are laid out horizontally within line boxes according to an Inline Formatting Context (IFC). The current wording incorrectly implies all boxes are laid out vertically.
2. **Out-of-Flow Content:** The presence of floats and absolutely positioned elements is not accounted for. These elements are not laid out "one after the other, vertically" in the BFC's primary flow.
3. **Flow-altering Properties:** The statement doesn't consider the effects of properties that alter the simple vertical stacking of in-flow blocks, such as negative margins, margin collapse, clearance, and relative positioning.

**Proposal**

The definition of a BFC is a known point of confusion, partly because its full definition is now fragmented across multiple modern specifications (Display, Containment, Fragmentation) without a single, updated canonical source.

Clarifying this foundational sentence in CSS 2.2 would provide significant value. A more precise statement might be something like:

    

> In a Block Formatting Context, a sequence of line boxes and in-flow block-level boxes are stacked vertically. The vertical position of each block is determined by its predecessor, accounting for margins, clearance, and other flow dynamics, while the content within line boxes is arranged horizontally according to an Inline Formatting Context.

This is just a starting point for discussion. I believe updating this line would greatly help developers who refer to this specification for a precise understanding of CSS layout mechanics.

Thank you for your consideration.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12524 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 25 July 2025 05:06:28 UTC