Floats can overlap when followed by element with clear and margin
Categories
(Core :: Layout: Floats, defect)
Tracking
()
People
(Reporter: Oriol, Unassigned)
Details
Attachments
(3 files)
firefox (bad)
<!DOCTYPE html>
<div style="display: flow-root; width: 100px">
<div style="float: left; height: 50px; width: 50px; background: lime"></div>
<div style="outline: solid">
<div style="float: left; width: 25px; height: 25px; background: blue"></div>
<div style="clear: both; height: 25px; margin-top: 100px; background: magenta"></div>
</div>
</div>
I think that Firefox sees margin-top: 100px, thinks it will collapse with the parent, and then places the blue float below the lime one.
However, in that case the magenta element would overlap with the blue float, so clearance needs to be added. And then the margin no longer collapses with the parent, so the blue float is no longer pushed downwards.
But here is the problem: Firefox still places the blue float at the very left, overlapping the lime float. It should instead be placed next to it.
See https://drafts.csswg.org/css2/#float-rules
If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box.
Blink and WebKit work fine.
|
Reporter | |
Comment 1•2 years ago
|
||
|
|
Reporter | |
Comment 2•2 years ago
|
||
|
||
Updated•2 years ago
|
Description
•