--- theme: vuepress highlight: monokai --- ## 一、你看得懂权威的解释吗？ ### 1. CSS 规范中对 BFC 的描述 [CSS 规范(英文)](https://www.w3.org/TR/CSS2/visuren.html#block-formatting) | [中文翻译](http://www.ayqy.net/doc/css2-1/visuren.html#block-formatting) > 浮动，绝对定位的元素，非块盒的块容器（例如inline-blocks，table-cells和table-captions），以及’overflow’不为’visible’的块盒（当该值已被传播到视口时除外（except when that value has been propagated to the viewport））会为其内容建立新的块格式化上下文 > >在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并 > >在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩译注：环绕浮动元素放置的行框比正常的行短一些），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄） ### 2. MDN 对 BFC 的描述 [MDN链接](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context) > **区块格式化上下文**（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 > > 下列方式会创建块格式化上下文： > > - 文档的根元素（``）。 > - 浮动元素（即 [`float`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/float) 值不为 `none` 的元素）。 > - 绝对定位元素（[`position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 值为 `absolute` 或 `fixed` 的元素）。 > - 行内块元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `inline-block` 的元素）。 > - 表格单元格（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `table-cell`，HTML 表格单元格默认值）。 > - 表格标题（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `table-caption`，HTML 表格标题默认值）。 > - 匿名表格单元格元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `table`（HTML 表格默认值）、`table-row`（表格行默认值）、`table-row-group`（表格体默认值）、`table-header-group`（表格头部默认值）、`table-footer-group`（表格尾部默认值）或 `inline-table`）。 > - [`overflow`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow) 值不为 `visible` 或 `clip` 的块级元素。 > - [`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `flow-root` 的元素。 > - [`contain`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain) 值为 `layout`、`content` 或 `paint` 的元素。 > - 弹性元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `flex` 或 `inline-flex` 元素的直接子元素），如果它们本身既不是[弹性](https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Container)、[网格](https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Container)也不是[表格](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_table)容器。 > - 网格元素（[`display`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display) 值为 `grid` 或 `inline-grid` 元素的直接子元素），如果它们本身既不是[弹性](https://developer.mozilla.org/zh-CN/docs/Glossary/Flex_Container)、[网格](https://developer.mozilla.org/zh-CN/docs/Glossary/Grid_Container)也不是[表格](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_table)容器。 > - 多列容器（[`column-count`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/column-count) 或 [`column-width` (en-US)](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width "Currently only available in English (US)") 值不为 `auto`，且含有 `column-count: 1` 的元素）。 > - `column-span` 值为 `all` 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（[规范变更](https://github.com/w3c/csswg-drafts/commit/a8634b96900279916bd6c505fda88dda71d8ec51)、[Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=709362)） > > 格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将： > > - 包含内部浮动。 > - 排除外部浮动。 > - 阻止[外边距重叠](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)。看了以上最权威的定义，你能看懂吗？如果不可以的话，那我们来看看国内 CSS 界大佬 —— 张鑫旭的描述吧。 ### 3. 张鑫旭对 BFC 的描述 [博客链接](https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/) > BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。张鑫旭直接不详细讲解了，而是让大家自行查找。所以，不管你在网上怎么搜索，不管你问谁，你都无法得到关于 BFC 的详细定义。 ## 二、为什么没法解释 BFC 是什么？ > 每个人都知道涩情是什么，但是没有一个人能把涩情说清楚正如： 1. 我不知道什么是 BFC 2. 但是你写出样式，我就知道这是不是 BFC BFC 就是这样的东西 (堆叠上下文也是) 1. 它没有定义 2. 他只有特性/功能 ## 三、所以，我们究竟该如何理解 BFC？ > 既然 BFC 的定义我们讲不清楚，那我们就不去研究它的定义了，我们知道如何去使用就可以了，所以我们应该从特性/功能去理解 BFC 先把 BFC 翻译过来： - Block Formatting Context - 块级格式化上下文 ### 功能1: 爸爸管儿子 > 用 BFC 包住浮动元素。(注意！这不是清除浮动，`.clearfix` 才是清除浮动) 在特定的情况下，会导致父容器无法包裹住子容器，请看代码： ```html

``` 正常来讲，`father` 是会抱住裹住 `son` 的，但我在 `son` 加上 `float: left;` 之后，却包不住了，看下面效果截图： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/46e0ca195c13431da7aad681a53f1bc9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1146&h=242&s=1848&e=png&b=0000ff) 解决方法： - 让 `father` 浮动起来，例如加上：`float：left;` - 把 `father` 设置为绝对定位，例如加上：`position: absolute` - 让 `father` 变为非块盒容器，例如加上：`display: inline-blocks` - 不让 `father` 的 `overflow` 的值为 `visible`，例如加上：`overflow: auto`\ (`overflow` 的默认值是 `visible`) - 使用绝招：在 `father` 上添加 `display: flow-root;`，这段代码只有一个功能，就是让当前元素变成一个 BFC，并且没有其他的副作用！但是在 BFC 里的元素的垂直 `margin` 合并 ### 功能2: 兄弟之间划清界限 > 用 `float` + `div` 做左右自适应布局看代码： ```html

``` 效果图： > 哥哥把弟弟压到下面去了！ ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be9eac3e0a8d45f6b3dc86067b05917b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1134&h=432&s=3143&e=png&b=ffee00) 解决方法：在弟弟元素加上：`overflow: auto;` 请看效果： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d62abc09c8554d478ad40eb991309db0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1140&h=438&s=3172&e=png&b=ffee00) ## 总结所以，不要尝试解释什么是 BFC，因为你一解释就错 --- 感谢阅读，下次见 :)