当元素的 display 值为 block、table-cell、table-caption、flex、inline-flex、grid 等值时，该元素就会生成一个块级格式化上下文（Block Formatting Context，BFC）。BFC 是 Web 页面中一个非常重要的渲染概念，在前端开发中应用广泛。开启BFC的区域，是一块独立的渲染区域。隔绝了内部与外部的联系，内部渲染不会影响外部，不同的BFC区域，渲染时页也互不干扰。
BFC 的作用是用于控制盒子内的布局及浮动元素的定位。BFC 可以防止元素被浮动元素覆盖，同时 BFC 也具有清除浮动的作用，常见的清除浮动方式就是通过给父元素生成 BFC。
一旦元素生成了 BFC，就会产生一系列的特性：
1、BFC 内部，每个元素的 margin box 的左边与包含块 border box 的左边相接触，即使存在浮动也是如此；
2、BFC 内部垂直方向的 margin 会发生折叠；
3、BFC 可以包含浮动元素，并且不会影响到外部元素的布局；
4、BFC 可以防止元素被浮动元素覆盖。
生成 BFC 的方式
一个元素如何生成 BFC 呢？下面列出几种生成 BFC 的方式：
1、float 值不为 none；
2、position 值为 absolute 或 fixed；
3、display 值为 inline-block、table-cell、table-caption、flex、inline-flex 等生成了新的块级盒子的值；
4、overflow 值不为 visible。
其中，最常见的方式就是给元素设置overflow: hidden或overflow: auto，如下代码：
.container {
overflow: auto;
}
BFC 的应用场景
清除浮动
在前端开发中，经常会使用浮动来实现多列布局或者图片环绕文本等效果。但是，浮动元素脱离了文档流，使得父元素失去了高度，导致父元素内部的其它元素会产生重叠或者溢出的情况。而这个时候就可以给父元素生成 BFC 来解决这个问题，如下代码：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent {
overflow: hidden;
}
.child {
float: left;
}
避免 margin 重叠
当两个相邻的元素都设置了 margin-top 或 margin-bottom 属性时，会产生 margin 重叠的情况，从而使得页面显示异常。而如果包含这两个元素的父元素生成了 BFC，那么这个问题就可以被解决。通过给父元素添加overflow: hidden属性，就可以生成 BFC，从而避免 margin 重叠问题。
自适应布局
有些情况下，为了实现某个特殊的效果需要两个元素的高度相等，但是由于这两个元素是独立的，无法直接通过设置 height 来实现。这个时候，使用 BFC 就可以轻松实现自适应布局。具体来说，可以将两个元素都设为 float：left，然后给它们的父元素设置 overflow:hidden 来生成 BFC，这样两个元素就能够自适应布局，并且高度相等。
避免嵌套div回流
在页面中，经常会出现多层嵌套的 div 元素，如果每个 div 都根据内容自适应宽高，那么很容易就出现多次 reflow 的情况。而如果给包含这些 div 元素的外层元素生成 BFC，那么就可以避免这种情况的发生。
以下代码演示了 BFC 的一些特性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BFC Demo</title>
<style>
.container {
width: 500px;
background-color: lightblue;
border: 1px solid #ccc;
overflow: auto; /* 让 .container 生成 BFC */
}
.left {
float: left;
width: 100px;
height: 200px;
background-color: pink;
margin-right: 20px;
}
.right {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
在上面的代码中，.container元素设置了overflow: auto属性，生成了一个 BFC；.left元素设置了浮动，而.right元素没有设置任何位置属性。结果如下：
可以看到，由于.container生成了 BFC，所以.right元素不会被浮动的.left元素覆盖，而是自动向下进行了布局。同时，由于.container生成的 BFC 内部每个元素的 margin box 的左边与包含块 border box 的左边相接触，因此.left元素的右侧 margin 与.container的右边框重叠。
在实际开发中，常见的利用 BFC 清除浮动的方式有两种：
1、父元素设置overflow: auto或hidden属性；
2、父元素设置非static的 position 属性。
总结：BFC 是一个很重要的布局概念，在前端开发中应用广泛。通过生成 BFC 可以控制元素的布局，防止浮动元素覆盖，并且可以解决一些常见的布局问题。在实际开发中，常见的利用 BFC 清除浮动的方式有两种：父元素设置overflow: auto或hidden属性，并设置非static的 position 属性。
若有不对之处还希望指正为谢！@~@
