CSS 中的 BFC 是什么，有什么作用？

BFC，即“块级格式化上下文”（Block Formatting Context），是 CSS 中一个重要的概念，它指的是一个独立的渲染区域，让块级盒子在布局时遵循一些特定的规则。BFC 的存在使得我们可以更好地控制文档流，处理浮动、清除浮动等问题。

 

BFC 的形成条件包括：

• 根元素或包含它的元素
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell）
• 表格标题（元素的 display 为 table-caption）
• overflow 值不为 visible 的块元素

BFC 的特性包括：

• 内部的 Box 会在垂直方向上一个接一个地放置。
• Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。
• BFC 的区域不会与浮动元素重叠。
• BFC 在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之亦然。
• 计算 BFC 的高度时，浮动元素也参与计算。

BFC 的应用场景包括：

1、清除浮动：

当一个容器内部有浮动元素时，如果没有给容器创建 BFC，那么容器的高度将无法被撑开，导致一些问题，如边框或背景不显示、文字环绕等。可以通过在容器上创建 BFC 来解决这个问题，例如可以将容器的 overflow 设置为 hidden。

2、避免 margin 重叠：

当两个相邻的盒子都设置了 margin 时，它们之间的距离将会是两者 margin 中较大的一个，而不是将两者相加。如果将其中一个盒子放入一个 BFC 中，可以避免 margin 重叠的问题。

3、实现多栏布局：

通过创建 BFC，可以将容器划分为独立的区域，在这些区域内布局，从而实现多栏布局。

4、防止浮动元素遮盖：

当一个元素内部有浮动元素时，如果该元素没有创建 BFC，那么它的高度会缩为0，从而导致元素下面的内容被浮动元素遮盖。可以通过在元素上创建 BFC 来防止这种情况的发生。

总之，理解 BFC 的概念及其应用场景，对于编写复杂的布局代码非常有帮助。通过创建 BFC，我们可以解决许多常见的布局问题，例如清除浮动、避免 margin 重叠、实现多栏布局等。

更多详细的CSS知识体系，可以通过这里了解学习

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC端项目开发（1个）
• 移动WebApp开发（2个）
• 多端响应式开发（1个）

共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范

从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

详细进入了解

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程