盒模型的边距重叠
主要分三种重叠， 重叠规则：一大一小取最大,一正一负取和
- 相邻元素之间的重叠
- 父子嵌套的重叠
- 空的块级元素
1.相邻元素之间的重叠
2.父子嵌套重叠
3.空的块级元素
BFC (边距重叠处理方案)
什么是BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
块级盒
每个块级盒子都会参与块格式化上下文（block formatting context）的创建，而每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box） 有时候定义了一个块级元素,设置了宽高虽然占据一行在chrome下会发现除了元素以外的一个包裹盒子像margin一样的颜色,这个就是块级盒;
每一个块级元素会生成一个
块级盒子的几种特性
- 块级盒会在垂直方向，一个接一个地放置，每个盒子水平占满整个容器空间
- 块级盒的垂直方向距离由上下 margin 决定，同属于一个 BFC 中的两个或以上块级盒的相接的 margin 会发生重叠
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算 BFC 的高度时，浮动元素也参与计算
如何创建BFC?
-根元素或包含根元素的元素 -浮动元素（元素的 float 不是 none） -绝对定位元素（元素的 position 为 absolute 或 fixed） -overflow 值不为 visible 的块元素 -display的值为inline-block、table-cell、table-caption
BFC的应用？
-清除浮动 -布局 -解决块级盒边距重叠
清除浮动
布局
解决块级盒边距重叠
