有遇到过margin重叠/塌陷问题吗？
目录
1、什么是 margin重叠/塌陷
2、开发中常见的margin塌陷
3、出现margin塌陷的原因
4、什么是BFC ？
5、BFC的特性和功能总结
6、触发BFC的CSS属性
7、解决margin塌陷的办法
1、什么是 margin重叠/塌陷
margin重叠（又称margin塌陷）：文档流内，块级元素与块级元素垂直方向上的 margin 合并（塌陷）为单个 margin，且只发生在垂直方向。
inline元素不存在margin 塌陷，因为inline元素不占有外边距，同样道理float元素也不存在margin合并。
2、开发中常见的margin塌陷
实际问题：
有两个盒子，上盒子外边距100px，下盒子外边距20px，那最后它们的边距是多少？
如果换成水平方向呢？它们之间的间距是多少？
答案：
垂直方向：100px; 水平方向：120px；
解析：
垂直情况，谁的”margin-方向“最大，那距离就等于谁；
垂直方向计算规则： 正正取大值，正负值相加，负负最小值
水平情况下，它们之间的距离等于它们所设置的外边距之和。
3、出现margin塌陷的原因
出现margin塌陷的原因：很久以前是为了解决多文本段落排版的问题；
设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
4、什么是BFC ？
BFC：
BFC（块级格式化上下文）是一个完全独立的空间（布局环境），独立的渲染区域，让空间里的子元素不受外面布局影响。BFC是隔离了的容器，所以BFC可以用来解决margin塌陷。
5、BFC的特性和功能总结
BFC特性：
① 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
② 计算BFC高度时浮动元素也参于计算（重点）
③ BFC的区域不会与浮动容器发生重叠（重点）
④ BFC内的容器在垂直方向依次排列
⑤ 元素的margin-left与其包含块的border-left相接触
⑥ BFC是独立容器，容器内部元素不会影响容器外部元素
BFC功能总结：
① 可以利用BFC解决两个相邻元素的上下margin重叠问题；
② 可以利用BFC解决高度塌陷问题；
③ 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）
6、触发BFC的CSS属性
触发
BFC的CSS属性：① overflow: 非visible (由于BFC的特性②，所以可以解决子元素浮动时，父元素高度塌陷的问题)
② display: inline-block、table-cell、flex、inline-flex、table-caption
③ position: absolute、fixed
④ float：非none
⑤ 根元素()
7、解决margin塌陷的办法
对于父子元素：
① 子元素取消margin，用父元素的padding代替
② 父元素增加透明边框 border:1px solid transparent // 这是基于最上面说的(其间没有任何非空内容、补白、边框)原理实现。
③ 父元素设置为BFC
④ 父元素增加一个伪元素
对于兄弟元素：
① 父元素flex布局，触发BFC，创建隔离的容器
② 子元素浮动定位，父元素清除浮动
③ 让其中一个兄弟元素触发BFC
原理：使得原本属于同一个BFC的两个兄弟元素，变成不同的BFC
