margin合并

以前学上下方向上margin会合并，就是单纯的知道，margin塌陷了，要形成BFC overflow:hidden 就好了，今天重新认识一下

margin合并现象

 body{border:5px solid #000;}
 .dad{outline:5px solid green;  }
 .son{border:5px solid red;padding:10px;margin:10px;}

<div class="dad">
  <div class="son"></div>
</div>

image.png

黑线：body 绿线：dad 红线：son

从图中可以看到，明明是son的margin，但是效果只要左右生效了，而上下margin作用到了dad上,很奇怪

怎么解决呢：
1.父级元素加一个border，有人会说不是已经加了border么，是绿色的
不不不，那是outline 和border是有区别的，outline不占高度，所以把outline改为border看看：

body{border:5px solid #000;}
.dad{border:5px solid green;}  
.son{border:5px solid red;padding:10px;margin:10px;}

image.png

成功作用到了son上面

2.dad加一个padding，同样也会生效

      body{border:10px solid #000;}
      .dad{outline:5px solid green;padding:1px;}
     .son{border:5px solid red;padding:10px;margin:10px;}

image.png

3.利用overflow-hidden，同样会生效

      body{border:10px solid #000;}
      .dad{outline:5px solid green;overflow:hidden;margin:10px;}
     .son{border:5px solid red;padding:10px;margin:10px;}

image.png

总结：margin塌陷原因我们不了解，但是需要知道怎么去解决
方法的核心思想就是让两个div的margin隔开，不要直接接触
border，padding都是将两个margin隔开了
而overflow：hidden 形成了一个BFC完全隔断了空间，内部与外部当然不影响

注意：不推荐overflow：hidden 方法，小白做法，清除浮动也是overflow：hidden，如果有一个mask在外面，全完蛋。