element-clears-float-without-clearance.html

<!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>
chromium/third_party/blink/web_tests/fast/block/float/element-clears-float-without-clearance.html
