[csswg-drafts] [CSS2] How do zero-width floats affect subsequent content

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

== [CSS2] How do zero-width floats affect subsequent content ==
https://www.w3.org/TR/CSS22/visuren.html#float-position doesn't seem to mention anything particular about zero-width floats. Should a zero-width margin box be considered to be a margin box at all?

<div style="width:100px;">
  <div style="float:right; width:0; height:50px;"></div>
  <div style="overflow:hidden; margin-right:-100px; height:200px; background:green;"></div>
</div>

Chrome, Edge and Firefox all show a green square here. The relevant spec wording:

"The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context [...]"

So a zero width float has no outer/margin box at all?

At the same time, all the browsers mentioned agree that zero-width floats should affect the block position of subsequent floats and blocks affected by clearance:

<div style="width:200px; background:green;">
  <div style="float:right; width:0; height:100px;"></div>
  <div style="float:left; clear:right; width:0; height:50px;"></div>
  <div style="float:left; width:0; height:100px;"></div>
  <div style="overflow:hidden; clear:both; height:200px; background:lime;"></div>
</div>

Here we get a green square above a lime square.

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

Received on Thursday, 15 February 2018 13:44:54 UTC