Inline element with a block ::before following a floated element is cleared

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Erik Bročko]

Created attachment 460925 [details]
Floated block followed by an inline element.

Elements with `float: right` followed by an inline container (set to `clear: both`) with ::before pseudo-element set to `display: block` inside it make the inline element truly cleared.

If `clear: both` is omitted, all works fine. If there is no `::before` block pseudoelement, it works fine. (Works fine = consistently with other browsers and previously observed behavior.)

Chrome, Firefox and Safari Technology Preview 142 render it the same way, with content immediately after the floated element wrapping around it. Safari Technology Preview 147+ and Safari 16.0 force the element to be cleared.

See my attached example.

I think this is because the ::before block pseudo-element gets put outside its parent inline element. I'm not sure if this is necessarily a bug. I couldn't test other versions of Safari, as they're impossible to download...

[Radar WebKit Bug Importer]

<rdar://problem/97436662>

[zalan]

> I think this is because the ::before block pseudo-element gets put outside
> its parent inline element. I'm not sure if this is necessarily a bug. I
> couldn't test other versions of Safari, as they're impossible to download...
Thank you for the test reduction. I think 'clear' confuses our inline layout and inflates the formatting context root's height. Looking into it now.

[zalan]

Created attachment 461368 [details]
Patch

[EWS]

Committed 253076@main (2c461c54b9fa): <https://commits.webkit.org/253076@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 461368 [details].