概念定义：

BFC（块格式化上下文），是布局当中生成的块级盒子的区域，也是浮动元素与其他元素的交互限定区域，可以简单的理解为一个CSS渲染规则，但是需要由一定条件才能够触发它，触发以后当前的区域会跟外界隔绝开来，不会互相干扰。

在常见的应用场景中，主要由这几个条件触发：

1.overflow 值不为 visible 的块元素

2.弹性元素（display为 flex 或 inline-flex元素的直接子元素）

3.网格元素（display为 grid 或 inline-grid 元素的直接子元素）

4.根元素或包含根元素的元素

5.浮动元素（元素的 float 不是 none）

6.绝对定位元素（元素的 position 为 absolute 或 fixed）

7.行内块元素（元素的 display 为 inline-block）

8. (详见MDN文档罗列的条件).....

那么触发了布局会发生什么变化？

1.内部的盒子会在垂直方向，一个个地放置

2. BFC是页面上的一个隔离的独立容器

3.属于同一个BFC的两个相邻Box的上下margin会发生重叠 

4.计算BFC的高度时，浮动元素也参与计算

5.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此

6.BFC的区域不会与float重叠

个人理解是触发之后，元素盒子的边缘会贴着内容的边缘，也就是跟着内容的大小随动地变化。

同时元素内部的浮动元素会被包裹进来，所以BFC可以用来清除浮动的影响。

根据这些规则，可以做出不错的布局效果，那么原理知道了，要将其运用于实战当中也是很重要的，这里我推荐的是腾讯Next学位公众号上写的一篇文章，老师写的很好，挺好理解：入口