margin塌陷 margin合并 二者详解

首先说一下margin塌陷

1.我们使父级的margin-top为50px时，父级便会距离上面50px。
2.当我们使子盒子的margin-top也为50px时，我们发现子盒子没有距离父级的上边50px，而是纹丝不动。

3.当我们给子盒子设置margin-top为100px时,我们会惊奇的发现，子盒子带着父盒子一起向下移动了100px。

上述出现的问题便是margin塌陷：父盒子与子盒子margin-top谁大就用谁的值。
那么如何解决这个小问题呢？

方法一
改变父级元素的渲染规则，使其变为BFC元素

如何触发一个盒子的BFC？一般有以下四方法：
①position:absolute;
②display:inline-block;
③float:left/right;
④overflow:hidden;

所以给父级元素加上以上任一css属性（如：加上display:inline-block;）
上述margin塌陷问题便会解决