mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-12 09:56:45 +02:00
2614790a93
CSS2 requires moving a float downward until it fits beside existing floats. We already handled same-side blockers, but opposite-side blockers could still overlap, such as matching left and right 100% floats. Recompute same-side bookkeeping after lowering and measure opposite-side intrusion in the current containing block's coordinate space. Also account for the full inline space already occupied on the current side after same-side stacking, so a float shifted next to an earlier same-side float does not still overlap an opposite-side float. Add tests covering inline and nested lowering, stale same-side line state, staggered opposite-side stacks, and the left/right/left 600px overlap case. Update the stacked clear-both expectation to match the corrected placement.
54 lines
741 B
HTML
54 lines
741 B
HTML
<!DOCTYPE html>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.container {
|
|
outline: 1px solid #666;
|
|
width: 760px;
|
|
}
|
|
|
|
.left {
|
|
background: rgba(80, 140, 255, 0.6);
|
|
float: left;
|
|
}
|
|
|
|
.right {
|
|
background: rgba(255, 140, 80, 0.6);
|
|
float: right;
|
|
}
|
|
|
|
.first-left {
|
|
width: 300px;
|
|
height: 40px;
|
|
}
|
|
|
|
.first-right {
|
|
width: 450px;
|
|
height: 50px;
|
|
}
|
|
|
|
.second-left {
|
|
width: 400px;
|
|
height: 50px;
|
|
}
|
|
|
|
.third-left {
|
|
width: 30px;
|
|
height: 20px;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
height: 0;
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<div class="left first-left"></div>
|
|
<div class="right first-right"></div>
|
|
<div class="left second-left"></div>
|
|
<div class="left third-left"></div>
|
|
<div class="clear"></div>
|
|
</div>
|