BFC详解

什么是BFC？怎么触发BFC？BFC有什么作用？可以解决哪些问题？

1.什么是BFC

先看下官方的解释：

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

官方的描述有点抽象，其实可以把BFC理解成就是css的块级作用域。

 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

2.怎么触发BFC

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

• 文档的根元素（）。
• 浮动元素（即 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)