包含块
什么是包含块？简单来说，就是决定一个元素大小和定位的元素。一个元素会为它的内部元素创建包含块，但也不能说元素的包含块就是它的父元素：
1、position:fixed 的元素
包含块是当前可视窗口
2、position:absolute 的元素
包含块是最近的 position属性为非static的祖先元素
3、静态定位和相对定位 的元素
包含块是最近的块级祖先元素
层叠上下文
跟BFC相似，是可以创建出来的(z-index: Number)
同一个层叠上下文中，层叠级别由低到高：边框和背景、负z-index、块盒子、浮动盒子、行内盒子、z-index:0、正z-index
一个元素在Z轴上的堆叠顺序，由『层叠上下文』和『层叠顺序』决定：
1、同一个层叠上下文，层叠级别大的元素在上
2、同一个层叠上下文，层叠级别相同，后来居上
3、不同的层叠上下文，由父级元素层叠上下文决定
BFC（块级格式上下文）
创建BFC
1、float: left、right
2、positon: absolute、fixed
3、display: inline-block、table-caption、table-cell (注：display为float、table、list-item等类型的会参与BFC，不会创建 )
4、overflow: auto、hidden、scroll
BFC的特点
1、在一个BFC内部，盒子会在垂直方向上排列
2、在一个BFC内部，相邻的margin-bottom和margin-top叠加
3、在一个BFC内部，每个元素左边紧贴着包含盒子的左边
4、在一个BFC内部，如果有一个内部元素是一个新的BFC，则新BFC区域不会与float元素的区域重叠
5、计算一个BFC高度时，内部浮动元素的高度也会参与计算
BFC用途
1、避免垂直外边距叠加 不让他们在同一个BFC里
2、清除浮动 如果一个元素是BFC，计算高度时，内部浮动子元素的高度也得算进去。这就是为什么我们经常用overflow清除浮动的原因
3、避免文字环绕 创建BFC后，新BFC就不会与float元素区域重叠了
4、自适应两列布局 同上