BFC 深度解析：是什么、触发与应用场景都有哪些？

BFC（Block Formatting Context）是一个独立的渲染区域，在该区域内，块级盒子布局与其他区域互不影响。理解BFC非常重要，它能解决很多常见的布局问题，如清除浮动、解决元素重叠等。

1. BFC是什么？

BFC是一个容器，里面的元素与外部的布局不会互相干扰。可以认为它是一个自包含的布局上下文，内部的元素会按照常规的块级布局规则来排列。通过触发BFC，可以避免浮动元素互相覆盖，防止外边距重叠等问题。

2. 触发BFC的条件

BFC可以通过以下方式触发：

• 设置 float 为 left 或 right（即浮动元素）。
• 设置 position 为 absolute 或 fixed（即定位元素）。
• 设置 display 为 inline-block、table、table-cell 等。
• 设置 overflow 为 hidden、auto、scroll（即溢出处理）。
• 设置 flex 或 grid 布局。