floats-wrap-bfc-with-margin-010-ref.html (1059B)
1 <!DOCTYPE html> 2 <title>CSS Test Reference</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <style> 5 body { 6 position: relative; 7 } 8 .wrapper { 9 position: absolute; 10 width: 100px; 11 border: 5px solid; 12 top: 75px; 13 } 14 .float { 15 position: absolute; 16 width: 50px; 17 height: 50px; 18 left: 0; 19 top: 0; 20 background: cyan; 21 } 22 .bfc { 23 position: absolute; 24 height: 50px; 25 background: green; 26 } 27 </style> 28 <div class="wrapper" style="left: 10px; height: 50px"> 29 <div class="float"></div> 30 <div class="bfc" style="width: 50px; left: 0; top: -75px"></div> 31 </div> 32 <div class="wrapper" style="left: 140px; height: 50px"> 33 <div class="float"></div> 34 <div class="bfc" style="width: 75px; left: 0; top: -75px"></div> 35 </div> 36 <div class="wrapper" style="left: 270px; height: 50px"> 37 <div class="float"></div> 38 <div class="bfc" style="width: 50px; left: 50px; top: -25px"></div> 39 </div> 40 <div class="wrapper" style="left: 400px; height: 100px"> 41 <div class="float"></div> 42 <div class="bfc" style="width: 75px; left: 0px; top: 50px"></div> 43 </div>