| <!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> |
