layout/reftests/floats/bfc-displace-2a-ref.html

   1 <!DOCTYPE HTML>
   2 <title>Test of block formatting context displacement by floats</title>
   3 <style>
   4
   5 .contain {
   6   border: medium solid;
   7   width: 400px;
   8   height: 400px;
   9   background: yellow;
  10 }
  11
  12 .block {
  13   height: 10px;
  14   background: aqua;
  15 }
  16
  17 .float {
  18   float: left;
  19   clear: left;
  20   height: 20px;
  21   background: blue;
  22 }
  23
  24 .bfc {
  25   float: left;
  26   width: 250px;
  27   margin-top: 7px;
  28   height: 13px; /* fits exactly */
  29   background: fuchsia;
  30 }
  31
  32 </style>
  33
  34
  35 <div class="contain">
  36   <div class="block"></div>
  37   <div class="float" style="width: 100px"></div>
  38   <div class="bfc"></div>
  39   <div class="float" style="width: 200px"></div>
  40 </div>