<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
<style>
#container {
width: 100px;
background: green;
}
#left {
float: left;
width: 25px;
height: 10px;
}
#right {
float: right;
width: 25px;
height: 20px;
}
#clears-left {
clear: left;
}
#zero {
margin-bottom: 40px;
margin-top: -20px;
}
#nested-float {
float: left;
width: 25px;
height: 20px;
}
#new-formatting-context {
overflow: hidden;
width: 60px;
height: 80px;
margin-top: -30px;
}
</style>
<p>Test passes if there is a filled green square.</p>
<div id=container>
<div id=left></div>
<div id=right></div>
<div>
<div id=clears-left>
<div>
<div id=zero></div>
<div id=nested-float></div>
<!--
The margins up to this new formatting context are chosen to hit an
edge condition. At this point there are two possible margins:
- (adjoining) {-30px, 40px} => 10px
- (non-adjoining) {-20px, 40px} => 20px
The logic for placing this new formatting context however shouldn't
check these margins, as there is an ancestor ("clears-left") which
has clearance past adjoining floats ("left", and "right").
And "nested-float" should get placed at "10px".
However if we didn't have this logic the following would occur.
1. We'd try and place the formatting context using the "adjoining"
margins.
2. The new formatting context doesn't "fit" on the same edge as the
floats, so it would trigger a retry using with a new position
calculated using the "non-adjoining" margins.
3. During the next pass, it still doesn't think the margins have
been separated yet as the parent is still using the position
calculated by the forced clearance from above.
4. It will trigger a retry again (and if an implementation does this
in a loop, will timeout).
-->
<div id=new-formatting-context></div>
</div>
</div>
</div>
</div>
Codebase Browser
chromium