margin的传递可见蓝快是在红块的子盒子，在对蓝色盒子添加 margin-top: 20px时候，两个盒子一起变化。这

margin-top的传递：如果块元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top会传递给父元素

<style>        
    .cl{width: 200px;           
        height: 200px;            
        background-color: red;        
     }        
     .z1{width: 100px;            
         height: 100px;            
         background-color: royalblue;            
         margin-top: 20px;        
        }        
      .z2{width: 100px;           
          height: 100px;            
          background-color: seagreen;        
        }    
</style>
</head>
<body>    
        <div class="z2"></div>    
        <div class="cl">        
        <div class="z1"></div>    
        </div>    
</body>

可见蓝快是在红块的子盒子，在对蓝色盒子添加 margin-top: 20px时候，两个盒子一起变化。这就是margi-top的传递

margin-bottom的传递：如果块元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom会传递给父元素

那么如何阻止传递呢？

1.给父元素设置padding

2.给父元素设置border

3触发BFC（结界）--- 推荐：设置overflow为auto/hidden