BFC
BFC（Block Formatting Context）块级格式上下文是页面是页面上的渲染容器，决定了子元素如何渲染。
BFC特性
- BFC中元素的布局不会影响其他BFC中元素的布局
- BFC的区域不会与float元素重叠
- BFC的区域高度会计算内部float元素
- 同一个BFC内的两个相邻块级元素会触发外边距合并。
- 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
满足以下条件之一即可触发BFC：
- 根元素（html）
- float的值不为none
- position的值为absolute和fixed。
- overflow的值不为visible。
- display的值为inline-block、table（table元素的默认属性）、table-cell（td的默认属性）、 table-caption、table-row（tr的默认属性）、 table-row-group（tbody的默认属性）、table-header-group（thead的默认属性）、table-footer-group（tfoot的默认属性）、inline-table、flow-root、flex、inline-flex、grid、inline-grid
- column-count 或 column-width 不为 auto
- column-span 为 all
IFC
IFC（Inline Formatting Context）内联格式化上下文
IFC特性
- IFC内部不能存在块级元素否则会被破坏， 而块级元素前的元素和块级元素后的元素将会各自自动产生一个匿名容器其包围，这个匿名的容器内部环境将是一个新的 IFC。
- 容器之间水平方向上的margin，padding，border生效，经过各种对齐方式之后产生的四边形区域称为line box。
- 因为对齐方式的问题，line box的高度>= 子元素高度
- 如果一个line box的宽度无法容下所有子元素，会被拆分成多个line box，line box垂直方向不能重叠、不能分离。
- float元素会挤占inline box的空间（可以用来实现四周环绕效果）
