什么是BFC？怎么触发BFC？BFC有什么作用？可以解决哪些问题？
1.什么是BFC
先看下官方的解释：
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
官方的描述有点抽象，其实可以把BFC理解成就是css的块级作用域。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
2.怎么触发BFC
下列方式会创建块格式化上下文：
- 文档的根元素（
<html>）。 - 浮动元素（即 float 值不为
none的元素）。 - 绝对定位元素（position 值为
absolute或fixed的元素）。 - 行内块元素（display 值为
inline-block的元素）。 - overflow 为hidden,scroll,auto的元素，值不为
visible或clip的块级元素。 - display 值为
flow-root的元素。 - 弹性元素（display 值为
flex或inline-flex元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。 - 网格元素（display 值为
grid或inline-grid元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。 - 表格单元格（display 值为
table-cell，HTML 表格单元格默认值）。 - 表格标题（display 值为
table-caption，HTML 表格标题默认值）。 - 匿名表格单元格元素（display 值为
table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或inline-table）。 - contain 值为
layout、content或paint的元素。 - 多列容器（column-count 或 column-width (en-US) 值不为
auto，且含有column-count: 1的元素）。 column-span值为all的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）
display: flow-root 是 CSS 中的一个属性，它可以让元素块状化，同时包含格式化上下文BFC。当应用 display: flow-root 声明后，无论是内联元素还是原本就是块级元素，都会变成块级元素，并建立新的块级格式上下文（BFC）
希望这个回答对你有所帮助！
3.BFC可以解决哪些问题
- 包含内部浮动。
- 排除外部浮动。
- 阻止外边距重叠。
参考链接：
区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)
掌握外边距折叠 - CSS：层叠样式表 | MDN (mozilla.org)
10 分钟理解 BFC 原理 - 知乎 (zhihu.com)
什么是BFC？面试前看这一篇就够了 - 知乎 (zhihu.com)
快速了解CSS display:flow-root声明 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
深入理解 CSS 中的外边距折叠及 BFC - 掘金 (juejin.cn)
)
)
