Skip to content

[css2.2] Suggestion: Clarify float placement for "inline -> float -> inline" source order #12554

@kannanwisen

Description

@kannanwisen

Hello CSS Working Group,

This issue is to suggest a clarification for the float placement algorithm in the CSS 2 specification, section 9.5.1. The specification describes the "reflow" behavior for a float that fits next to preceding inline content, but it does not explicitly define the outcome when the float does not fit.

This ambiguity leads to a non-obvious layout behavior that is difficult for developers to predict without empirical testing.

The Point of Confusion

The specification states that if a float "fits in the remaining line box space," the preceding inline content will be reflowed. However, it does not clearly state what happens when the float does not fit.

Based on testing in modern browsers, the following behavior is observed in this scenario:

  1. The browser first lays out all contiguous inline content that precedes the float in the source, filling one or more full-width line boxes.
  2. It then encounters the float and determines that it cannot fit on the last line occupied by the preceding content.
  3. The float is then placed on a new line, vertically below all the preceding inline content.
  4. Crucially, the browser then continues processing the source order. Any inline content that comes after the float is reflowed onto the same line as the preceding inline content, immediately following it, if space allows.

This final step is highly non-intuitive and is not a simple consequence of the other documented float rules.

Proposal for Clarification

This behavior is a unique case that deserves its own explicit explanation in the specification. To improve clarity, I suggest adding a note or an illustrative example that describes this outcome.

An example of what this clarification could look like:

If a float is preceded by inline-level content but does not fit in the remaining horizontal space on the line, the browser first completes the layout of all contiguous inline content that appears before the float. The float is then moved down to the next available line below this content. Any subsequent inline content that appears after the float in the source is then reflowed onto the same line as the preceding content, if space allows.

Adding this clarification would resolve a significant point of confusion and provide a more complete and accurate picture of the float placement algorithm for developers.

Thank you for your consideration.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions