BFC即块级格式化上下文，脱离正常文档流，每个BFC是一个独立渲染的区域，其只包含创建该上下文元素的所有子元素，不包括子元素的子元素，其布局不会影响到外部元素。

怎么产生BFC：

• body根元素
• 设置浮动，不包括none
• 设置定位，absolute、fixed
• inline-block
• 设置overflow，hidden、auto、scrol
• 表格单元格：table-cell
• 弹性布局：flex

BFC作用：

• margin外边距高度坍塌
• 清楚浮动，浮动会导致父元素高度坍塌（新增子元素：clear:both、浮动元素的容器加overflow:hidden，就是形成bfc，不会受到子元素影响、使用css的after伪元素，块级可不见元素)

---

参考链接🔗：

BFC

什么是BFC，他有什么用？_King十三的博客-CSDN博客_bfc (opens new window)

清楚浮动三种方法：

css清除浮动的几种方式_潮汐未见潮落的博客-CSDN博客_css清除浮动的几种方法 (opens new window)