官方定义
块级格式化上下文（Block Formatting Context，BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程法神高度区域，也是浮动元素与其他元素交互的区域。
下列方式之一都可以创建BFC：
- 根元素（
<html>) - 浮动元素（元素的
float不是none） - 绝对定位元素（元素的
position为absolute或fixed） - 行内块元素（元素的 display 为 inline-block）
- 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
- 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
- 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
- overflow 值不为 visible 的块元素
- display 值为 flow-root 的元素
- contain 值为 layout、content或 paint 的元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
- column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
块格式化上下文包含创建它的元素内部的所有内容。
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。
以上就是MDN官方文档的部分解说了，但是还是有点懵，现在我们看看正经的。。。。
创建BFC的条件（上面官方的说法有点啰嗦，我们再简单地总结一遍）
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC的布局规则(这个可以细品，看完下面的例子再回来看看）
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
BFC可以解决什么问题？
- 利用BFC避免margin重叠
- 使BFC内部浮动元素不会到处乱跑
- 自适应两栏布局
一、利用BFC避免margin重叠
首先会发生margin重叠的肯定使同一个BFC内的块级元素，例如div，p，不是块级元素不会发生重叠。
具体的margin重叠请看这篇文章：BFC与margin重叠
看这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防止margin重叠</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<p>看看我的 margin是多少</p>
</body>
</html>
上面这张图很明显就是外边距重叠，这就满足了两个条件：同一个BFC内，都是块级元素。所以我们只要破环其中之一就可以解决外边距重叠这个问题，这里我选择的是让其中之一块级元素再单独放在一个BFC，这样就产生了两个BFC。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防止margin重叠</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
float: left;
}
div {
overflow: hidden;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div>
</body>
</html>
二、使BFC内部浮动元素不会到处乱跑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使BFC内部的浮动元素不会乱跑</title>
</head>
<style>
.out {
width: 100px;
min-height: 30px;
background-color: #ffeeaa;
}
.in {
width: 80px;
height: 100px;
background-color: #aaccdd;
float: left;
}
</style>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
这里其实有涉及到float元素，如果对float元素不是很熟悉建议去看我写的另一篇文章：CSS之float属性详解
上面我们可以看到里面的元素已经脱离了文档流，并没有被外面的元素包裹住，外元素高度坍塌，这时候我们可以给父节点（外元素）创建一个BFC，，BFC计算高度时会包括浮动的高度，使 BFC 内部的浮动元素不会到处乱跑。(创建BFC的方法有很多，这里我就不多说了，我采取的是给out添加向左浮动的方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使BFC内部的浮动元素不会乱跑</title>
</head>
<style>
.out {
width: 100px;
min-height: 30px;
background-color: #ffeeaa;
float: left;
}
.in {
width: 80px;
height: 100px;
background-color: #aaccdd;
float: left;
}
</style>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
三、自适应两栏布局
先来看一个文字环绕效果：
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：
这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)
总结
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
本文章参考了以下博客：
