两个盒子在垂直方向上排列时，如果同时设置margin会造成塌陷问题， 具体分为两种： 1）两个同级盒子垂直排列 2）嵌套盒子垂直排列

一、同级盒子的margin处理

1、这种塌陷可以忽略，只需将其中的margin调到理想的最大值即可（期望两个盒子的上下间距为200px， 当设置两个盒子的margin-bottom: 100px; margin-top: 100px;时，由于塌陷会造成两个盒子的上下间距仅为100px，如果不想处理可以直接设置两个盒子的margin-bottom: 200px; margin-top: 200px;）

2、这种情况也有解决方法，即在两个同级子元素外同时再套一个盒子parent，parent设为BFC即可

二、嵌套盒子的margin处理

解决思路：父盒子没有设置高度时，自身的高度会被子盒子撑起来，此时遇到塌陷问题，可以考虑使父盒子脱离文档了（BFC），目的是将盒子的脱离于当前文档流，塌陷自然被解决。方法就是设置BFC的几种手段，当然也可以给父盒子设置padding或border。

BFC设置： 1、浮动元素，float 除 none 以外的值； 2、绝对定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex； 4、overflow 除了 visible 以外的值（hidden，auto，scroll）；