什么是BFC？

---

前言

BFC这个知识点我在面试中（目前为止），就遇到过一次，但是直接被问傻了~因为只是大概记得BFC的概念以及部分触发BFC的情况，所以今天特意整理出来了一篇关于BFC的相关知识，所以在面试中，不仅仅是js的相关知识是重点，css也会涉及哦

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是BFC？

BFC即 Block Formatting Contexts (块状格式化上下文)， 是 W3C CSS2.1 规范中的一个概念，可以简单理解成：在页面中创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部）

二、哪些属性会触发BFC？

1、根元素：HTML元素
2、浮动：floa为left或right的时候
3、定位：position为absolute（绝对定位）或fixed（固定定位）
4、溢出：overflow不为visible时（不对溢出部分做处理）
5、修改元素类型：display为inline-block、 flex,、inline-flex、grid、inline-grid、table-cell等等

三、BFC的作用有哪些？

清除内部浮动：
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0，解决这个问题，只需要把父元素变成一个BFC就行了，常用的办法是给父元素设置overflow:hidden。

垂直margin合并：
在CSS当中，相邻的两个盒子的外边距会合并成一个单独的外边距，这种合并外边距的方式被称为重叠，所以重叠的外边距叫做重叠外边距
重叠外边距有以下几种结果：
两个相邻盒子的margin都是正数时，重叠结果是两者之间较大的值。
两个相邻盒子的margin的外边距都是负数时，重叠结果是两者绝对值的较大值。
两个盒子的margin外边距一正一负时，重叠结果是两者的相加的和。