bfc-displace-3b-ref.html (595B)
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 .float { 13 float: left; 14 clear: left; 15 height: 20px; 16 background: blue; 17 } 18 19 .bfc { 20 float: left; 21 clear: left; 22 width: 250px; 23 height: 21px; /* one pixel too tall to fit next to first float */ 24 background: fuchsia; 25 } 26 27 </style> 28 29 30 <div class="contain"> 31 <div class="float" style="width: 100px; margin-top: 3px"></div> 32 <div class="float" style="width: 200px"></div> 33 <div class="bfc"></div> 34 </div>