共计 2691 个字符，预计需要花费 7 分钟才能阅读完成。
残缺高频题库仓库地址：https://github.com/hzfe/aweso…
残缺高频题库浏览地址：https://hzfe.github.io/awesom…
相干问题
- BFC 有什么用，如何触发
- 谈谈你对 BFC 的了解
答复关键点
盒模型 视觉格式化模型 蕴含块 失常流
BFC 是什么
BFC 全称为 block formatting context，中文为“块级格式化上下文”。它是一个只有块级盒子参加的独立块级渲染区域，它规定了外部的块级盒子如何布局，且与区域内部无关。
BFC 有什么用
- 修复浮动元素造成的高度塌陷问题。
- 防止非冀望的外边距折叠。
- 实现灵便强壮的自适应布局。
触发 BFC 的常见条件
- <html> 根元素。
- float 的值不为 none。
- position 的值不为 relative 或 static。
- overflow 的值不为 visible 或 clip（除了根元素）。
- display 的值为 table-cell，table-caption，或 inline-block 中的任意一个。
- display 的值为 flow-root，flow-root，或 list-item。
- flex items，即 display 的值为 flex 或 inline-flex 的元素的间接子元素（该子元素 display 不为 flex，grid，或 table）。
- grid items，即 display 的值为 grid 或 inline-grid 的元素的间接子元素（该子元素 display 不为 flex，grid，或 table）。
- contain 的值为 layout，content，paint，或 strict 中的任意一个。
- column-span 设置为 all 的元素。
提醒：display: flow-root，contain: layout 等是无副作用的，可在不影响已有布局的状况下触发 BFC。
知识点深刻
1. 前置知识点
盒模型（box model）
盒模型 形容了一个由元素生成的矩形盒子，视觉格式化模型 决定这些盒子的大小、地位以及属性（例如色彩、背景、边框尺寸等等）。
盒子的具体形成如下图所示：
术语解析
因为视觉格式化模型形容中，有许多相近的术语，在此后行列出解释。
- box（盒子）：一个抽象概念，在画布上占据一块空间，通常由元素（element）生成。一个元素可能生成多个盒子（如伪元素、list-item 元素）。
- principal box（次要盒子）：元素生成的多个盒子中，用来蕴含它的后辈盒子和它生成的内容的盒子，也是参加任何定位计划的盒子。
- block-level box（块级盒子）：参加 BFC 布局的盒子，通常由块级元素生成。
- block container box（块容器）：在 CSS2.2 中，除了 tabel box 或替换元素的次要盒子，一个块级盒子也是块容器，但不是所有的块容器都是块级盒子（如非替换内联块盒子）。块容器次要侧重于其子元素的定位、布局。
- block box（块盒子）：如果一个块级盒子同时也是块容器，则能够称作块盒子。
- block（块）：当没有歧义时，作为 block box, block-level box 或 block container box 的简写。
（注：盒子有“块盒子”和“块级盒子”，元素只有“块级元素”，而没有“块元素”）
2. 视觉格式化模型（visual formatting model）
视觉格式化模型形容了用户代理（如浏览器）在可视化媒体（如显示器）上解决文档树（document tree）的过程。上面各大节是视觉格式化模型中与 BFC 强相干的形容：
2.1 蕴含块（containing block）
大部分状况下，蕴含块是一个由元素最近的先人块容器的内容区域（content area）确定的矩形区域，蕴含块自身不是盒子，是一个矩形区域。元素的大小，地位，及偏移等布局信息依据蕴含块的尺寸进行计算。
2.2 失常流（normal flow）
失常流是浏览器的默认布局形式。在失常流中的盒子，属于 BFC，IFC，或其余格式化上下文之一。
2.3 格式化上下文（formatting context）
格式化上下文 是一系列相干盒子进行布局的环境。不同的格式化上下文有不同的布局规定。目前常见的格式化上下文有以下这些：
- 块级格式化上下文（BFC，block formatting context）。
- 内联格式化上下文（IFC，inline formatting context）。
- 弹性格式化上下文（FFC，flex formatting context），在 CSS3 中定义。
- 栅格格式化上下文（GFC，grid formatting context），在 CSS3 中定义。
2.4 独立格式化上下文（independent formatting context）
一个盒子要么建设一个新的独立格式化上下文，要么连续其蕴含块的格式化上下文。除了非凡阐明，建设新的格式化上下文就是在建设一个独立格式化上下文。
当一个盒子建设一个独立格式化上下文时，它创立了一个新的独立布局环境。除了通过扭转盒子自身的大小，盒子外部的后辈不会影响格式化上下文内部的规定和内容，反之亦然。
2.5 块级格式化上下文标准及解析
依据 W3C CSS2.1 视觉格式化模型一章的定义，BFC 相干标准形容如下：
- 浮动元素，相对定位元素，不是块级盒子的块级容器（如 inline-block，table-cells，table-captions）以及 overflow 值不为 visible 的块级盒子，都会为他们的内容创立 BFC（注：触发 BFC 的条件）。
- 在 BFC 中，盒子从蕴含块的顶部开始，在垂直方向上一个接一个的排列。相邻盒子之间的垂直间隙由它们的 margin 值决定。在同一个 BFC 中，相邻块级盒子的垂直外边距会合并（注：参加 BFC 布局的都是块级元素）。
- 在 BFC 中，每一个盒子的左外边缘（margin-left）会触碰到蕴含块的左边缘。即便是存在浮动元素也是如此，除非该盒子建设了一个新的 BFC。
联合标准第三点与 独立格式化上下文 的常识，咱们能够有以下推论：
- BFC 内外互不影响。
- BFC 蕴含外部的浮动（解决外部浮动元素导致的高度塌陷）。
- BFC 排挤内部的浮动（触发 BFC 的元素不会和内部的浮动元素重叠）。
- 外边距折叠的计算不能逾越 BFC 的边界。
- 各自创立了 BFC 的兄弟元素互不影响（注：在程度方向上多个浮动元素加一个或零个触发 BFC 的元素能够造成多列布局）。
通过 BFC 能够实现灵便强壮的自适应布局，在一行中达到相似 flexbox 的成果，示例如下：
两栏自适应布局
多列自适应布局
参考资料
- 块级格式化上下文
- 蕴含块：MDN
- 蕴含块：W3C
- 视觉格式化模型：MDN
- 视觉格式化模型：W3C
- 盒模型：MDN
- 盒模型：W3C
