collapsing-margin外边距叠加

外边距叠加是指：若两个元素上下毗邻且都定义了不为0的外边距离，同时又没有任何内边距，边框等设定，那么这两个元素之间的距离将小于二者外边距的和。因此两个都带有40px外边框的元素垂直相接并不会出现80px的垂直距离，只会取两者的最大值，即40px。

.div{width:40px;height:40px;margin-bottom:40px;padding:1px;background:red;}
.div2{width:40px;height:40px;margin-top:40px;background:red;}

Paste_Image.png

触发BFC (Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。) 的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）
    创建BFC的初衷只是为了让元素本身（包括它的子元素）能够正确的计算自己的宽高。
    不发生折叠的触发因素是浮动元素、inline-block 元素、绝对定位元素，这个只是创建BFC因素的子集，但并不能说明创建了BFC的元素就不会发生折叠，因为BFC还可以用overflow:hidden来创建。相反如果父元素触发了BFC，那么他的块级子元素反而会发生折叠。
    理解原理，如果想不发生叠加就好办了，设置浮动，定位，display的一些属性都可以，但推荐用垂直方向上用同一个margin值比如margin:top，或者用padding或border代替margin,border设置transparent即可，甚至在块级元素中间加点什么内容隔绝两者也可以。