1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .box{ 8 background-color: green; 9 overflow: hidden; <margin-top会传递,使得两个框不挨着最上边而是有50px的尺寸> 10 zoom:1; <zoom触发haslayout>
<上下margin会叠加分别给出margin-top>
11 } 12 .item{ 13 height: 50px; 14 background-color: red; 15 margin-top: 50px; 16 } 17 .mt100{ 18 margin-top: 100px; 19 } 20 </style> 21 <!-- 22 1、margin-top传递 23 触发BFC、haslayout 24 2、上下margin叠压 25 尽量使用同一方向的margin，比如都设置top或者bottom， 26 --> 27 </head> 28 <body> 29 <div class="box"> 30 <div class="item"></div> 31 <div class="item mt100"></div> 32 </div> 33 </body> 34 </html>