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

BFC解决的问题

• 元素开启 BFC 后，其子元素不会再产生 margin 場陷问题。
• 元素开启 BFC 后，自己不会被其他浮动元素所麗盖。
• 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

开启BFC的方式

• 浮动元素
• 绝对定位、固定定位的云素
• 行内块元素
• 表格单元格：table、thepd 、 tbody
• overflow 的位不为 visible 的块元素
• 伸缩项目
• 多列容器
• column-span 为 all 时元素（即使该
• display 的值设置为flow-root

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context