bfc-displace-2b-ref.html (654B)
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 clear: left; 27 width: 250px; 28 height: 14px; /* one pixel too tall to fit next to first float */ 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="float" style="width: 200px"></div> 39 <div class="bfc"></div> 40 </div>