| <!DOCTYPE html> |
| <style> |
| .bfc { |
| overflow:hidden; |
| border:solid; |
| margin-top:1em; |
| } |
| |
| .float { |
| background-color: aqua; |
| float: left; |
| height: 30px; |
| } |
| |
| .clear { |
| clear:left; |
| margin-top:50px; |
| height: 50px; |
| background-color: orange; |
| } |
| section { |
| float: left; |
| width: 25%; |
| margin: 0 5px; |
| padding: 5px; |
| background: #ddd; |
| } |
| |
| </style> |
| <section> |
| crbug.com/434048 : The orange boxes should sit right under the float. |
| <div class="bfc"> |
| <div> |
| <div class="float">float</div> |
| <div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bfc"> |
| <div> |
| <div class="float">float</div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| |
| <div class="bfc"> |
| <div> |
| <div> |
| <div class="float">float</div> |
| </div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| </section> |
| |
| <section> |
| crbug.com/434048 : There should be 20px between the orange box and the float. |
| <div class="bfc"> |
| <div> |
| <div class="float">float</div> |
| </div> |
| <div class="clear">clear</div> |
| </div> |
| |
| <div class="bfc"> |
| <div class="float">float</div> |
| <div style="margin-top: 30px;"> |
| <div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bfc"> |
| <div class="float">float</div> |
| <div style="margin-top: 10px;"> |
| <div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section> |
| crbug.com/434048 : There should be 20px between the orange box and the float. |
| <div class="bfc"> |
| <div class="float">float</div> |
| <div> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| |
| <div class="bfc"> |
| <div class="float">float</div> |
| <div style="margin-top: 40px;"> |
| <div class="clear">clear</div> |
| </div> |
| </div> |
| |
| <div class="bfc"> |
| <div class="float">float</div> |
| <div class="clear">clear</div> |
| </div> |
| </section> |
