BFC是CSS中独立的块级渲染区域，内部布局不影响外部，外部变化也不影响内部；可通过根元素、浮动、绝对定位、inline-block、table-cell、flex/grid子元素、overflow非visible等触发，用于防止margin合并、清除浮动、阻止文字环绕。
BFC 是 Block Formatting Context 的缩写，中文意思是“块级格式化上下文”。它是 CSS 中一个独立的渲染区域，决定了元素如何对内部的子元素进行布局，以及与其他元素之间的相互影响。
什么是BFC？
在BFC中，元素按照块级元素的方式进行布局。它是一块独立的“容器”，内部元素的布局不会影响到外部元素，外部元素的变化也不会影响BFC内部的布局。
简单来说，开启BFC后，这个元素就拥有了自己的“私有空间”。
如何触发BFC？
以下方式可以让一个元素创建BFC：
立即学习“前端免费学习笔记（深入）”；
- 根元素（html）
- 浮动元素（float 值不为 none）
- 绝对定位元素（position 为 absolute 或 fixed）
- 行内块元素（display: inline-block）
- 表格单元格（display: table-cell）
- 弹性盒项目（display: flex 或 inline-flex 的直接子元素）
- 网格布局项目（display: grid 或 inline-grid 的直接子元素）
- overflow 值为 auto、hidden、scroll 的块级元素
BFC的作用和常见用途
BFC最实用的地方在于解决一些常见的布局问题：
- 防止外边距合并（margin collapse）：两个相邻块级元素的上下 margin 会合并，但如果它们处于不同的 BFC 中，就不会合并。
- 清除浮动影响：父元素包含浮动子元素时，通常高度塌陷，通过给父元素设置 BFC 可以包含住浮动元素。
- 阻止文字环绕：当一个元素浮动时，文字会围绕它排布。如果让文字所在的元素形成 BFC，就能避免这种环绕，实现自适应两栏布局。
举个实际例子
比如有一个浮动的侧边栏，右边是正文内容。为了让正文不被侧边栏覆盖，并保持独立排布，可以将正文的容器设置为 BFC：
aside {
float: left;
width: 200px;
}
main {
overflow: hidden; /* 触发BFC */
}这样 main 区域就会避开浮动元素，自动占据剩余宽度。
基本上就这些。理解BFC有助于更好地掌握CSS布局机制，尤其是在处理浮动、边距和层叠问题时非常有用。
