[csswg-drafts] [css-break] How to treat float margins? (#9191)

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

== [css-break] How to treat float margins? ==
https://www.w3.org/TR/css-break-3/#break-margins doesn't say anything special about floats. It focuses on block-level boxes, i.e. not floats.

Floats are special, in that their margins do not collapse with anything. So should they collapse with (or be truncated by) (or do something else (slice?) at) fragmentainer boundaries? In a way, one can say that a float's margins are treated just like border or padding, since sibling content will not overlap with the margins, unless forced. The boundary for regular boxes is the border-box, whereas for floats, it's the margin-box.

There are interoperability issues here. Gecko makes a float's block margins unbreakable if break-inside:avoid is specified, but not otherwise. Blink attempts to treat such margins as completely unbreakable (except that there are bugs with the block-end margin; see https://bugs.chromium.org/p/chromium/issues/detail?id=1458768 , but that's not very relevant here).

Example:
```html
<div style="overflow:auto; columns:2; column-fill:auto; height:100px;">
  <div style="height:80px;"></div>
  <div style="float:left; width:100%; margin-top:50px; height:10px;"></div>
</div>
```

What should happen to the margin?

A. Should it be truncated, like a regular blockl?
B. Should it overflow the first column and cause the multicol container to be scrollable?
C. Should it be sliced, so that 20px ends up in the first column, and 30px in the second?
D. Should it it be pushed to the second column, just before the border-box of the float?
E. <Something even more creative>

Gecko does B, Blink does D.

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


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

Received on Tuesday, 15 August 2023 12:32:12 UTC