BFC是什么？
BFC是英文Block FORmatting Context的缩写，翻译成中文就是“块级格式化上下文”。
BFC在我个人理解来看就是创造一个特殊的盒子来困住父盒子里面的元素，不让它们对外面的布局造成影响，也不会让外面对里面的子元素产生影响。
触发BFC的方式
触发BFC主要有以下几种方式：
- overflow的值不为visible。
- display的值为inline-block、table-cell、flex、table-caption或者inline-flex。
- position:absolute;（绝对定位） position:fixed;(固定定位)。
- float除了none。
BFC的作用
1.清除浮动
例：当父盒子不设置高度，子元素全部浮动时，会出现父盒子高度塌陷的问题，代码和效果如下：
由图可以看到子元素添加浮动后脱标导致无法撑开父盒子高度，这时候就可以通过触发BFC的方式，使父盒子高度变正常。
例如给父盒子添加overflow:hidden;
2.用BFC清除margin合并的状况。
例：兄弟元素发生外边距合并
两个块级元素盒子上下排版，上面的盒子设置了100px的下外边距，下面的盒子设置了20px的上外边距，本来两个盒子之间的距离应该是120px，但是这时候两个盒子却发生了外边距合并，实际盒子的上下距离却是100px。 代码图如图所示：
页面图如下图所示：
这时候想要消除外边距合并的怪异现象，我们需要触发BFC来解决，这里需要给其中一个兄弟盒子（.big或.small）添加一个父盒子(.box1)并设置overflow:hidden;代码和效果如下：
通过图片可以看到盒子的合并现象解决了。
3.用BFC清除margin塌陷的状况。
例 两个互相嵌套的块级元素，子元素设置margin-top会导致父元素有margin-top，从而导致父元素一起往下移动。 代码图和效果图如下：
由图可知，子盒子设置的margin-top并没有实现想要的效果，反而让父盒子跟着一起移动了，这时候用BFC也可以解决该问题。给大盒子设置overflow:hidden; 效果如下：
由图可以看出外边距塌陷问题被解决。
4.自适应两栏布局。
例 首先结构设置两个盒子，一个给宽高并设置浮动，另一个不给宽度让其自适应。 示例代码如图：
这时候并不能做到两栏布局，效果图如下：
这时候可以通过给自适应宽度的元素添加个父盒子，再给自适应宽度的元素的父盒子触发BFC就可以实现两栏布局了。这里通过给父盒子设置display:block实现。代码如下图所示：
效果图如下：
BFC的特性
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加，与方向无关。
- 每个元素的margin box的左边，与包含块border box的左边相接触，即使在浮动元素中也是这样。
- BFC的区域不会与float box叠加，利用此特性可以实现两列布局，左边固定宽度，右边自适应。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，里面的子元素也不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也会参与计算。
