前言
以前对BFC的理解仅限于，两个相邻的box盒子设置margin，外边距会出现塌陷，会以margin最大值作为两个盒子的距离。解决思路是只设置一个方向的margin值，或者给任意一个box盒子再嵌套一个box盒子。后面发现自己的理解太狭隘，于是在网上收集资料，分析；写下自己对BFC的理解。
一、什么是BFC
Formatting context 是W3C，CSS2.1规范中的一个概念。它是页面中的一块渲染区域，有着自己的渲染规则。最常见的Formatting context有Block Formatting context(BFC, 块级格式化上下文)和Lnline Formatting context(IFC).CSS3中添加了GFC和FFC。
BFC（块级格式化上下文）是Formatting context的一种，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则（不仅限于下面的规则）；它决定了在其的元素渲染方式：
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
二、BFC形成条件（不仅限于下面的条件）
- 根元素 ，即在html元素下的块级元素；
- float元素为left,right
- overflow的值不为visible,为auto、scroll、hidden
- position的为absolute、fixed
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
三、BFC的作用
BFC应用场景：
- 防止外边距塌陷
两个盒子相邻外边距会发生塌陷，两个盒子的距离会以margin最大的值作为。
解决方法：
- 只给一个盒子设置外边距
- 给其中任意一个盒子再嵌套一个盒子
结果：
- 清除内部浮动，计算元素高度
在css中一个盒子，里面有个浮动元素的盒子，计算高度时，不计算浮动元素的高度。
解决方法：
- 触发外部盒子形成BFC渲染区域
- 自适应多栏布局
效果如下：
left盒子浮动，right盒子宽度不能自适应，并且与浮动的盒子重叠，左外边距接触都是同一个点。
解决方法： 1.触发right盒子形成BFC区域，因为BFC区域不会与浮动元素重叠；每个元素的左外边距与包含块的左边界相接触（从左到右）
效果如下：
总结：BFC是一个独立的盒子，有自己的渲染规则，里面的子元素不影响外面的元素。
参考文献：
