margin塌陷问题_css 2个垂直排列div同时设置margin

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

1 同级盒子的margin处理

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

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

2 嵌套盒子的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）；

这里是引用
BFC详细介绍：https://www.cnblogs.com/yuer20180726/p/11395982.html