这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助一、你看得懂权威的解释吗？1. CSS 规范中对 BFC 的描述

CSS 规范(英文) | 中文翻译

浮动，绝对定位的元素，非块盒的块容器（例如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链接

区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

  • 文档的根元素（）。
  • 浮动元素（即float值不为none的元素）。
  • 绝对定位元素（position值为absolute或fixed的元素）。
  • 行内块元素（display值为inline-block的元素）。
  • 表格单元格（display值为table-cell，HTML 表格单元格默认值）。
  • 表格标题（display值为table-caption，HTML 表格标题默认值）。
  • 匿名表格单元格元素（display值为table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或inline-table）。
  • overflow值不为visible或clip的块级元素。
  • display值为flow-root的元素。
  • contain值为layout、content或paint的元素。
  • 弹性元素（display值为flex或inline-flex元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 网格元素（display值为grid或inline-grid元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
  • 多列容器（column-count或column-width(en-US)值不为auto，且含有column-count: 1的元素）。
  • column-span值为all的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：

  • 包含内部浮动。
  • 排除外部浮动。
  • 阻止外边距重叠。

看了以上最权威的定义，你能看懂吗？如果不可以的话，那我们来看看国内 CSS 界大佬 —— 张鑫旭 的描述吧。

3. 张鑫旭对 BFC 的描述

博客链接

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 才是清除浮动)

在特定的情况下，会导致父容器无法包裹住子容器，请看代码：

  .father{    border: 1px solid red;  }  .son{    height: 100px;    background: blue;    width: 400px;    float: left; <- 注意这一行  }

正常来讲，father是会抱住裹住son的，但我在son加上float: left;之后，却包不住了，看下面效果截图：

解决方法：

  • 让 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 做左右自适应布局

看代码：

  .big-bro{    width: 100px;    height: 200px;    background:rgba(0,0,0,0.3);    float: left;    border: 2px solid blue;  }  .young-ber{    height: 200px;    background: yellow;    border: 5px solid red;  }

效果图：

哥哥把弟弟压到下面去了！

解决方法：在弟弟元素加上：overflow: auto;

请看效果：

总结

所以，不要尝试解释什么是 BFC，因为你一解释就错，我不明白面试官为什么经常要问 :)

本文转载于:https://juejin.cn/post/7303392509664247835如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。