Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clarify float positioning with anonymous block-level boxes #11226

Open
gitspeaks opened this issue Nov 17, 2024 · 3 comments
Open

Clarify float positioning with anonymous block-level boxes #11226

gitspeaks opened this issue Nov 17, 2024 · 3 comments
Labels
CSS2

Comments

@gitspeaks
Copy link

gitspeaks commented Nov 17, 2024 •
edited
Loading

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.
@Loirooriol
Copy link
Contributor

The text "inline content" should be wrapped in an anonymous block-level box because of its inline nature.

Yes, but the float is also placed inside this this anonymous block. Since it's out-of-flow it doesn't break the sequence of inline-level contents.

Or at least that's how we did it in Servo. (We just happen to match your expectation because the intrinsic sizes of an inline formatting context don't handle floats well, but we match other browsers if the container is wide enough)

@gitspeaks
Copy link
Author

Yes, but the float is also placed inside this this anonymous block.

If there are multiple floated boxes, are they all supposed to be placed inside the first anonymous block box that precedes them? What happens if inline content is placed between floats in this case? Does each sequence of floats get assigned to the anonymous block box that immediately precedes them?

@Loirooriol
Copy link
Contributor

Does each sequence of floats get assigned to the anonymous block box that immediately precedes them?

Yes, that's what we do in Servo. If the preceding in-flow content is inline-level, we put the float into that inline formatting context. Otherwise we put it into the list of block-level boxes of the block container. See https://github.com/servo/servo/blob/f71f38bd3de00180b2dc632ef3cce90c558cfa06/components/layout_2020/flow/construct.rs#L570-L599

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Loirooriol @gitspeaks