1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:57:46 +00:00

LibWeb: Narrow width of boxes that create BFC to avoid overlap of float

https://www.w3.org/TR/CSS22/visuren.html#floats says that when a box
establishes BFC it should not overlap with floats. The way to avoid
overlaps is up to implementor. This change implements avoiding overlap
by narrowing width of a box because it seems like what other engines
do (in the scenarios I tested).
This commit is contained in:
Aliaksandr Kalenik 2023-05-04 06:34:35 +03:00 committed by Andreas Kling
parent bf41af6b9d
commit 853ecb8d8e
3 changed files with 71 additions and 10 deletions

View file

@ -0,0 +1,23 @@
<style>
* {
font-family: 'SerenitySans';
}
.float {
width: 200px;
height: 1000px;
background-color: royalblue;
float: right;
}
.bfc {
background-color: mediumseagreen;
border: 10px solid skyblue;
display: flow-root;
}
</style>
<div class="wrapper"><div class="float"></div><div class="bfc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae
neque nunc. Nam fermentum libero a lectus vulputate eleifend. Nam sagittis
tristique augue, id sodales mauris suscipit at. Vivamus eget placerat ex.
Suspendisse potenti. Morbi pulvinar ipsum eget nulla dapibus, ac varius mi
eleifend.