mirror of
https://github.com/RGBCube/serenity
synced 2025-05-30 23:08:11 +00:00
853ecb8d8e
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).
23 lines
650 B
HTML
23 lines
650 B
HTML
<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.
|