一、根据盒模型解释边距重叠 margin-collapse
边距重叠三种情况：
- 父子元素边距重叠，父div的margin-top:30px，子div的margin-top: 10px，取最大值原则，二者重叠后的margin-top: 30px
- 兄弟元素边距重叠，上div的margin-bottom: 30px，下div的margin-top: 10px，取最大值原则，上下div的margin间隙为30px
- 空元素的边距重叠，一个空div既有margin-top: 10px，也有margin-bottom: 30px，取最大值原则，那么空div的margin上下重合为margin 30px
边距重叠计算规则：
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
二、BFC(块级格式化上下文)——边距重叠解决方案
FC(格式化上下文):
- FC即格式上下文，它定义框内部元素的渲染规则。不同类型的框参与的FC类型不同，块级框对应BFC，行内框对应IFC。
- 相比BFC规则来说，IFC可能更加抽象，但总的来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则。
注意：并不是说所有的框都会产生FC，而是符合特定条件才会产生，只有产生了对应的FC后才会应用对应渲染规则
复制代码BFC是什么：
- 简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
- 具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，常用清除浮动的方法（如 overflow方法）就是触发了浮动元素的父元素为 BFC ，使得它可以包含浮动元素，从而防止出现高度塌陷的问题。
BFC原理：
- （1） 元素的垂直方向的边距margin会发生重叠；
- （2） BFC区域不会与浮动元素的box重叠；
- （3） BFC是一个隔离的独立容器，内部与外部的元素是不会相互影响的；
- （4） 内部box在垂直方向，一个接一个的放置；
- （5） 计算BFC高度的时候，浮动元素也会参与计算（不会浮动坍塌）
如何创建BFC：
- （1） 浮动元素，float 除 none 以外的值
- （2） 绝对定位元素，position除static或者relative以外的值均可（absolute或fixed）
- （3） display 为以下其中之一的值 （inline-blocks，flex，inline-flex，table，table-cells，table-captions）
- （4） overflow 除了 visible 以外的值（hidden，auto，scroll）
BFC使用场景：
- 使用场景1：两个或多个块级盒子的垂直相邻边界会重合
原理是利用：BFC是独立的元素，内部与外部的元素不会相互影响；
注意上图中，2的上下外边距margin（粉色部分）与1、3发生了重叠。
将2用父层div包裹，并添加BFC属性后，再看接下来的效果：
通过开发者工具选中2的盒模型，看到上下margin并没有与其兄弟元素的margin重叠
- 使用场景2：文档流会在超出左侧浮动区块的区域向左填充
原理是利用：BFC区域不会与浮动元素的box重叠；
上图的问题是，灰色部分会向左填充浮动区块意外的区域（粉色浮动区块下面的灰色部分）
给右侧非浮动区块添加BFC属性，成为独立的BFC区块，就不会与左侧浮动元素的box重叠了
- 使用场景3：浮动元素不会参与父元素高度计算（高度塌陷问题）
原理是利用：BFC元素的子元素即使是浮动的其也会参与高度计算（清除浮动的原理）
上图中，浮动元素没有参与到父层wrapper的高度计算中
将父层wrapper添加BFC属性，此时浮动子元素也将参与到父层元素的高度计算中，背景色呈红色