css BFC

前情提要

文档流动：定位流、浮动流、普通流（formatting context：渲染区域、渲染规则，简称FC）

常见的FC：IFC、BFC、FFC等

BFC是什么

Block Formatting Context 块级格式化上下文，一块区域，一块独立的渲染区域，有自己的一套渲染规则

渲染机制

• 区域内元素外边框会重叠
• 区域内的元素不会与外部浮动元素重叠
• 计算BFC区域的高度，浮动元素也参与计算
• BFC区域相当于是容器，内部元素不会影响外部，外部也不会影响内部

创建BFC区域

• 根元素HTML
• float不为none
• postion: 不是static 和 relative
• overflow：不是 visible
• display：inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid

BFC能解决什么问题

• 清除浮动 给当前元素浮动的父级区域设置为BFC（overflow: hidden）
• 相邻元素外边距重叠 其中一个套入一个div 设置为BFC（overflow: hidden）
• 父子元素边距重合，父元素设置BFC（overflow:hidden）

参考链接：

CSS中解决父子边界重叠问题_父子元素外边距重叠-CSDN博客

面试官: 谈谈你对BFC的理解以及外边距合并的问题_bfc面试-CSDN博客

CSS 中你应该了解的 BFC - 掘金 (juejin.cn)

前端面经 - 看这篇就够了（帮你拿到大厂offer） - 掘金 (juejin.cn)