layout/reftests/floats/bfc-displace-3a.html
author Nika Layzell <nika@thelayzells.com>
Wed, 17 Apr 2019 00:53:05 +0000
changeset 469844 5fde2cc9277a3d4bb73d859ba571c84fdc2ead9b
parent 255766 80ef9bb2c2e9ebaf375e078428e9615d46adbde9
permissions -rw-r--r--
Bug 1542790 - Part 1: BC::GetParent on toplevel windows should be self, r=peterv Differential Revision: https://phabricator.services.mozilla.com/D26558

<!DOCTYPE HTML>
<title>Test of block formatting context displacement by floats</title>
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#floats">
<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself.">
<style>

.contain {
  border: medium solid;
  width: 400px;
  height: 400px;
  background: yellow;
}

.margin {
  margin-top: 3px;
}

.float {
  float: left;
  clear: left;
  height: 20px;
  background: blue;
}

.bfc {
  overflow: hidden;
  width: 250px;
  margin-top: 7px; /* collapses */
  height: 20px; /* fits exactly */
  margin-bottom: 20px;
  background: fuchsia;
}

</style>


<div class="contain">
  <div class="margin">
    <div class="float" style="width: 100px"></div>
    <div class="float" style="width: 200px"></div>
    <div class="bfc"></div>
  </div>
</div>