什么是BFC？作用是什么？怎么开启？

在解释BFC是什么之前，需要先介绍Box、Formatting Context的概念。

Box CSS布局的基本单位

Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。 元素的类型和displhy 属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

block-level box：display 属性为block，list-item，table的元素，会生成block-level box。并且参与block fomatting context（BFC）；

inline-level box：display 属性为inline，inline-block，inline-table的元素，会生成inline-level box。并且参与inline formatting context（IFC）

Formatting context

Formatting context是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context（简称BFC）Inline formatting context（简称IFC）。

BFC是什么（块级格式化上下文）

BFC（Block formatting context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的(不包括自己）Block-levelBox如何布局，并且与这个区域外部毫不相干

BFC布局规则：

1、内部的Box会在垂直方向，一个接一个地放置。
2、BFC的区域不会与float box重叠。
3、内部的box垂直方向的距离由margin决定。属于 同一个BFC的两个相邻 的BOX的margin会发生重叠
4、计算BFC高度时，浮动元素也会被计算在内（清楚浮动haslayout）
5、BFC就是页面上一个隔离的区域，外面不会影响到内部爱，内部也不会影响到外面

BFC什么时候出现（哪些会生成BFC？）

根元素
float属性不为none
position为absolute或fixed
overflow不为visible
display为inline-block，table-cell，table-caption，flex，inline-flex

应用例子

在两列布局中，需要一边固定，另一边自适应，在没有开启BFC时，右边div会由于左边发生浮动的原因挤了上去，结果图看起来也算勉强实现了两列布局，但是打开调试器你们看到，右边的盒子是站满了一行的，并不算真正的两列布局

.left{
     float: left;
     width: 200px;
     height: 500px;
     background-color: pink;
 }
.right{
     height: 500px;
     background-color: #bfc;
     /*overflow: hidden;*/
 }

 <div class="left">left</div>
 <div class="right">right</div>

根据BFC的规则则可以避免浮动元素其他盒子重叠的问题，因此可以在右边元素添加overflow:hidden使之成为BFC盒子

https://zhuanlan.zhihu.com/p/74817089