[csswg-drafts] Clarify float positioning with anonymous block-level boxes (#11226)

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

== Clarify float positioning with anonymous block-level boxes ==
The specification on [anonymous block boxes](https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level) states that if a block container contains a block-level box, it is forced to only contain block-level boxes by wrapping any inline-level content in anonymous block boxes.

The specification on [positioning schemes](https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme) explains that in the float model:

- A box is first laid out according to the normal flow.
- It is then taken out of the flow and shifted as far as possible to the left or right.
- Content may flow along the sides of a float.

The spec on [floats](https://www.w3.org/TR/CSS22/visuren.html#floats) further clarifies:
> "Non-positioned block boxes created *before and after* the float box flow vertically as if the float did not exist."

Example scenario:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #block-container {
        position: absolute;
        background-color: red;
      }

      #block-level-box {
        background-color: blue;
        width: fit-content;
      }

      #floated-box {
        background-color: green;
        height: 100px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="block-container">
      <div id="block-level-box">block level box</div>
      inline content
      <div id="floated-box">floated box</div>
    </div>
  </body>
</html>
```

Expected behavior:

- According to the spec, in the float model, _boxes are laid out in normal flow first_.
- The text "inline content" should be wrapped in an anonymous block-level box because of its inline nature.
- Non-positioned block boxes (e.g., the anonymous block wrapping the text "inline content") should be positioned on its own line below `block-level-box`. The `floated-box` should then appear right below the `anonymous block-level` box.

Actual behavior (In both Chrome and Firefox):
- The `floated-box` div appears immediately below the `block-level-box`.
- The `anonymous block-level` box wrapping the text "inline-content" is placed adjacent to the right of the `floated-box`, on the same line.


Could the spec be clarified to better define the expected behavior of anonymous block-level boxes in the presence of floats? The current behavior in Chrome and Firefox appears to contradict the specification.

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


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

Received on Sunday, 17 November 2024 12:37:19 UTC