[css2.2] Suggestion: Clarify float placement for "inline -> float -> inline" source order
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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:
- The browser first lays out all contiguous inline content that precedes the float in the source, filling one or more full-width line boxes.
- It then encounters the float and determines that it cannot fit on the last line occupied by the preceding content.
- The float is then placed on a new line, vertically below all the preceding inline content.
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with CSS 2 section 9.5.1 and review the described float-placement behavior against the inline → float → inline case in this issue. Update the specification with a clear note or illustrative example covering the non-fitting float and subsequent inline content, then verify that the wording resolves the stated ambiguity.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Documentation
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100