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