布局相关理论知识

定位模式（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为正数的子元素或子堆叠上下文