1.什么是BFC
BFC即Block Formatting Contexts（块级格式化上下文），是W3C CSS2.1规范中的一个概念。BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。简单来说，BFC就是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
BFC具有以下特点：
- BFC内部的Box会在垂直方向一个接一个地放置。
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
- 从左往右的格式化，包括浮动。
- BFC是一个隔离的独立容器，容器里面的元素不会在布局上影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
具有BFC特性的元素可以看作是隔离了的独立容器，通俗一点来讲，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
在布局中BFC的应用场景包括：
- 清除盒子垂直方向上外边距合并：根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden），这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。
- 在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。解决方法是给父元素设置overflow:hidden，这样会产生BFC。
要触发BFC（Block Formatting Context），可以采取以下几种方法：
- 将元素的display属性设置为block、table或flex。这些类型的元素会自动创建BFC。
- 将元素的overflow属性设置为auto、scroll或hidden。这些属性可以触发BFC。
- 将元素的position属性设置为relative、absolute或fixed。这些属性也可以触发BFC。
- 将元素的float属性设置为left、right或none。设置float属性可以触发BFC。
- 不同浏览器有不同规则
)
