margin塌陷是什么、解决办法，以及什么是BFC和它的作用

1、什么是margin塌陷（只发生在垂直方向）

1. 同级元素塌陷：两盒子之间的margin出现了重叠部分，垂直之间塌陷的原则是以两盒子最大的外边距为准。
2. 父子元素塌陷：父子元素之间也会出现margin塌陷，
   Ⅰ、父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
   Ⅱ、本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来。
   

原文：https://www.jianshu.com/p/85590424958c

2、margin塌陷解决办法

为了避免margin坍塌现象，就要通过各种方式触发BFC。
触发BFC的几种方式：

1. overflow:hidden/auto/scroll;
2. position不是static也不是relative；
3. float不是none；
4. display是table-cell或inline.

原文：https://www.imooc.com/qadetail/176054?t=258376
补充：https://www.cnblogs.com/hugejinfan/p/5901320.html

3、BFC 特性及其他应用（清除浮动等等）

https://zhuanlan.zhihu.com/p/25321647