Clarify float positioning with anonymous block-level boxes #11226

gitspeaks · 2024-11-17T12:37:16Z

The specification on anonymous block boxes 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 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 further clarifies:

"Non-positioned block boxes created before and after the float box flow vertically as if the float did not exist."

Example scenario:

<!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:

The text "inline content" should be wrapped in an anonymous block-level box because of its inline nature.
The anonymous block-level box should be positioned on its own line below block-level-box.
According to the spec, in the float model, floated boxes are laid out in normal flow first. 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.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Clarify float positioning with anonymous block-level boxes #11226

Clarify float positioning with anonymous block-level boxes #11226

gitspeaks commented Nov 17, 2024 •

edited

Loading

Clarify float positioning with anonymous block-level boxes #11226

Clarify float positioning with anonymous block-level boxes #11226

Comments

gitspeaks commented Nov 17, 2024 • edited Loading

gitspeaks commented Nov 17, 2024 •

edited

Loading