定位模式（Positioning schemes）
- 常规流（Normal Flow）
- 除根元素，浮动元素，绝对定位元素，其它元素都在常规流之内（in-flow）
- 根元素，浮动元素和绝对定位元素会脱离常规流（out of flow）
- 常规流中的盒子属于块级格式化上下文或行级格式化上下文
- 浮动（Float）
- 浮动元素从常规流中脱离，被漂浮在容器的左边或右边
- 浮动盒会一直飘到其外边缘挨到容器边缘（border）或者另外的浮动盒
- 浮动元素不会影响后面流内块级盒
- 浮动元素后面的行级盒子会变短来避开浮动元素
- 绝对定位（Absolute Positioning）
- 脱离常规流
- 相对于最近的非static祖先的padding box定位
- 不会对流内元素布局造成影响
- 可以有margin，不会collapse
块级格式化上下文（Block Formatting Context）
- 盒子在容器内由上到下，一个接一个地放置
- 两个兄弟盒子之间的垂直距离由margin决定
- 同一个BFC内垂直margin会合并
- 盒子的左边缘挨着容器的左边
BFC的特征
- BFC内的浮动不会影响到BFC外的元素
- BFC的高度包含内部的浮动元素
- BFC不会和浮动元素重叠
BFC的创建
- 浮动框
- 绝对定位框
- 非块级的块容器（inline-block）
- overflow属性不为visible的块框
BFC的作用
- 清除浮动
- 防止margin合并
- 双栏布局
行级格式化上下文（Inline Formatting Context）
- 盒子一个接一个水平放置
- 盒子之间的水平margin，border，padding都有效
- 同一行的盒子所在矩形区域叫行盒（Line Box）
- 当一个行盒放不下上下文内所有盒子时，会被分到多个垂直堆叠的行盒里
- 行盒内的水平分布由text-align属性决定
- 如果一个行级块无法分割（单词，inline-block），该元素会被作为一个整体决定分布在哪一个行盒
清除浮动
- clear属性：指定元素的哪一边不能与之前的浮动框相邻
.clearfix::after{
content:' ';
display:block;
clear:both
}
也可以加在避开浮动元素.clearfix::before
z-index堆叠层次
- 为定位元素（非static元素）指定其在z轴的上下级
- 整数表示，数值越大，越靠近用户
- 初始值为auto，可以为0，正数，负数
堆叠上下文（Stacking Content）的生成
- Root元素
- z-index值不为auto的元素
- 设置了一些CSS3属性的元素，如opacity，transform，animation等
在一个堆叠上下文中从底层到上层的绘制顺序：
- 形成该上下文元素的border和background
- z-index为负值的子元素或子堆叠上下文
- 常规流内的块级元素而且非浮动的子元素
- 非定位的浮动元素
- 常规流内非定位的行级元素
- z-index为0的子元素或子堆叠上下文
- z-index为正数的子元素或子堆叠上下文
