[csswg-drafts] [CSS2] Settle on clearance behavior

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

== [CSS2] Settle on clearance behavior ==
https://www.w3.org/TR/CSS22/visuren.html#propdef-clear offers two alternative ways of calculating clearance. One allowed behavior is to set clearance to be the greater of:

Constraint 1. The amount necessary to place the border edge of the block even with the bottom outer edge of the lowest float that is to be cleared.
Constraint 2. The amount necessary to place the top border edge of the block at its hypothetical position.

The other allowed behavior is to just do constraint 1, and not 2.

Currently Chrome and Firefox just do 1. Edge probably does 1 and 2, but I'm not sure.

Could we standardize this? I may be biased, but I think just doing 1 should suffice.

Demo:

```
<p>Edge has a gap between the blue and the hotpink boxes. Chrome and Firefox don't.</p>
<div id="bfc" style="overflow:hidden;">
  <div id="container" style="margin-top:100px;">
    <div style="float:left; width:100px; height:100px; background:blue;"></div>
    <div id="blockChild" style="clear:both; margin-top:300px; height:100px; background:hotpink;"></div>
  </div>
</div>
```

If we want to involve constraint 2, we end up setting a position that isn't based on anything from the actual layout (because what collapses with what changes after applying clearance). First, #blockChild gets a hypothetical top position of 300px relatively to #bfc, and 0 relatively to #container. The float ends up flush with #blockChild, since it tags along with #blockChild when there's no clearance. So we get clearance, since #blockChild isn't past the float. Clearance inhibits margin collapsing. So we get, from top to bottom:

100px #container top margin
The float, 100px tall
Clearance
300px #blockChild top margin

What should the clearance be?

Constraint 1: Putting #blockChild just below the float would require a clearance of -200px, because of its margin-top of 300px and that it only has to be pushed 100px down to get past the float.

Constraint 2: Talking about hypothetical position at this point is really weird. Back when we calculated it, #container and #blockChild had adjoining margins. Not anymore. #blockChild was 300px relatively to the block formatting context origin, and at 0, relatively to #container, since their margins would collapse without clearance. So what should clearance become? I guess 0. That seems to be what Edge is doing, anyway.

max(-200px, 0) is 0, and Edge places #blockChild ends up 400px relatively to #bfc.

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

Received on Monday, 23 April 2018 16:09:58 UTC