前端面试题（16）—— BFC及其应用

定义：

• BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种CSS渲染方式，相当于一个独立的容器，里面的元素和外部元素相互不影响。

• 官方文档解释如下：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.（一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素。）

---

创建BFC的方式：

• html根元素
• float浮动
• 绝对定位
• overflow不为visible
• display为表格布局或者弹性布局

---

BFC主要作用：

• 清除浮动，比如元素内有浮动子元素导致高度塌陷，给这个元素添加 overflow：hidden 可以实现包裹浮动子元素。（因为创建了 BFC，不允许孩子超出自己的边界）
• 防止同一BFC容器中的相邻元素间外边距重叠问题，父子块级元素如果没有设置边框和padding，外边距会产生折叠。给父元素添加 overflow：hidden 后会阻止父子元素外边距折叠。

---

推荐以下两个内容，我觉得写的很好
https://zhuanlan.zhihu.com/p/378256583
https://www.itcast.cn/news/20201016/16152387135.shtml