格式化上下文布局
FC（Formatting Context）格式化上下文—— 一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。
IFC布局——行内格式化上下文
inline formatting context
触发IFC的方法
块容器盒内不包括任何块级盒，即块容器盒（html行内块级标签或块级标签）内全是行内盒（html内联标签）
IFC布局的特点
- 行内盒水平排列为一行，当容器宽度不够时就会换行
- 每一行都会生成一个行盒（见触发IFC的方法中的配图），内部包括该行所有的盒子
- 行盒的宽度由包含块和存在的浮动来决定
- 行盒的高度由内部元素中实际高度最高的元素计算出来
- 水平方向上行内盒的外边距、边框、内边距所占用的空间都会被计算，但垂直的border，padding 与 margin 都不会撑开行盒的高度
- 水平方向的对齐通过 text-align 来设置，默认对齐为left 左对齐（当所有盒的总宽度小于行盒的宽度时）
- 垂直方向的对齐通过 vertical-align 来设置，默认对齐为 baseline 基线对齐（当最高的行内盒的高度小于行盒的高度时）
- 当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒相互之间垂直方向不能分离，不能重叠
- 行盒一般左右边都贴紧其包含块，但是会因为浮动盒（float 元素）的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度
- 当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里。如果一个行内盒不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个行内盒将溢出这个行盒
BFC布局——块级格式化上下文
block formatting context
触发BFC的方法
满足以下任意一个条件即可
- html根元素；
- float的值不为none；
- overflow的值为auto、scroll或hidden【推荐】；
- display的值为table-cell、table-caption和inline-block中的任何一个；
- position的值不为relative和static。
BFC布局的特点
具有BFC的元素的内部元素不会影响外部元素，也不会被外部元素影响
- 不会发生margin重叠
- 可以清除浮动
- 实现更健壮、更智能的自适应布局
