前端面试-什么是BFC, IFC？
BFC(Block Formatting Contexts) 块级格式化上下文
块级格式化上下文是页面上的一块渲染区域，这块区域由符合条件的容器产生。容器内的子元素会由块盒子和浮动元素按如下规则排列：
- 纵向一个挨着一个排列
- 两个盒子的纵向间距由
margin属性决定，两个相邻的盒子在垂直方向上的margin会有种“重叠合并”的效果，此时纵向间距距离取较大的那个margin值
这个容器可以看作一个独立的布局环境，容器外的元素与容器内的元素（包括浮动元素）在布局上不会影响到对方。这就产生了两种有趣的效果：
- BFC容器的高度将浮动元素的高度计算进去。（MDN示例)
- 浮动清除效果。BFC会排斥外部浮动元素，让浮动元素和块元素在视觉上不再有重叠的效果。（MDN示例）
产生块格式上下文的方式有：
-
根元素 -
<html> -
浮动元素 - 非
float: none的元素 -
绝对定位元素 -
position为absolute或fixed的元素（和产生粘滞效果sticky的元素？） -
行内块元素 -
display为inline-block的元素 -
表格元素
-
display: table-cell的元素，如<td> -
display: table-caption的元素，如<th> -
display: table的元素，如<table> -
display: table-row的元素，如<tr> -
display: table-row-group的元素，如<tbody> -
display: table-header-group的元素，如<thead> -
display: table-footer-group的元素，如<tfoot> -
display: inline-table的元素
-
-
overflow不为visible的块元素 -
display: flow-root的元素 -
contain: layout | content | paint的元素 -
弹性元素 -
display: flex | inline-flex的直接子元素 -
网格元素 -
display: grid | inline-grid的直接子元素 -
多列容器 -
column-count或column-width不为auto -
column-span: all的元素
IFC(Inline Formatting Contexts)行内格式化上下文
行内格式化上下文的布局首先要根据水平、垂直和左右书写模式来讨论：
- 在水平书写模式
writing-mode: hortizontal-tb下，盒子会在水平方向上从左到右排列，空间不够时换到下一行继续。 - 在垂直书写模式下
writing-mode: vertical-rl | vertical-lr，盒子会在垂直方向上从上到下排列，空间不够时换到下一行继续。只是这里的“下一行”有左右之分。writing-mode: vertical-rl时就像古代人书写以及日本*书籍的格式一样，从右到左排列。writing-mode: vertical-lr则是从左到右排列。
每“行”在浏览器中会被作为一个盒子处理，这个盒子叫行框（line box）。它的高度由其包含行内元素的最低位置到最高位置（不包含margin）计算而来。因为考虑盒子间对齐处理的关系，这个值可能会比行内最高的元素要高。
当有浮动元素在行内式化上下文时，在浮动元素之后的行框可能会因为它而缩短宽度，产生“文字环绕”效果。（示例)
当行框内的行内元素没有占满整行的空间时，他们在水平方向的位置会受到text-align属性的影响。
而当行内元素太长时，会被分割为多行，也就是说这个元素内产生了多个行框排列在一起。此时margin、border、padding都不会在断裂处生效。
满足一下条件时，行框会被当作高度为0的盒子处理：
- 不含文字
- 非
white-space: pre | pre-wrap | pre-line - 不含
margin、padding、border值不为零的元素 - 不含在常规流中的元素，如图片、表格之类
参考：
- Block formatting context - MDN
- Inline formatting context - MDN
- CSS 2.1 - 9.4 Normal flow - W3C