每日学习-- margin 为什么会发生重叠以及解决

块级元素 相邻margin会发生重叠，大多数人都知道。也大都知道解决方法， 但是 为什么会重叠呢？？

• 在stackoverflow上找到了一个很好的解释：margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白。

• 得到了这个解释之后，想一下“为首个子元素添加20px的上边距，父元素竟跟着子元素下沉了”这个问题，再思考一下解决方法。给父元素添加overflow开启一个BFC，或者给父元素增加padding、border之类，这样的做法使元素的旁边边界不是上一个盒子而是父元素，必须要存在的空白的相对位置变了，这个时候，子元素不会再去“影响”父元素的位置。

• 一般就是给父元素设置overflow: hidden;即可解决问题，之所以出现这种情况的原因是：普通文档流盒子间，只要垂直外边距直接接触就会发生合并，合并后外边距视觉高度取两个发生合并外边距中较大者。发生这一现象的有三种情况：相邻兄弟块元素间、父元素及其首子元素和末子元素间（没有内边距或边框把外边距分隔开）、空块级元素自身的合并。

• 解决方法：
  当两个处于同一BFC的box在垂直方向上发生重叠时，可以在其中一个box的外面包裹一个容器，并使用其触发一个BFC，这样两者就处于不同的BFC中，也就不会相互影响了。

• 出发BFC的条件：
  1.浮动元素，float 除 none 以外的值
  2.position的值不为static或者relative
  3.display不为none
  4.overflow 除了 visible 以外的值