bfc-displace-1a-ref.html (549B)
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 width: 250px; 22 margin-top: 7px; 23 height: 13px; /* fits exactly */ 24 background: fuchsia; 25 } 26 27 </style> 28 29 30 <div class="contain"> 31 <div class="float" style="width: 100px"></div> 32 <div class="bfc"></div> 33 <div class="float" style="width: 200px"></div> 34 </div>