BFC的英文全称是 Block Formatting Contex 翻译出来就是 格式化上下文，记得学习看过一堆专业的描述，但是都没记住。。
只记得最后老师这么总结：bfc就像是护崽的娘，不让孩子去打扰别人，也不让别人影响到自己。
下面就用我自己的语言进行mark一下吧：
BFC是 W3C CSS2.1 规范中提出的一个概念，它是页面中的一块渲染区域，并且它有一套渲染规则，决定了自己的子元素和周围的元素之间的关系。
以下这些条件会产生BFC（MDN里面查到的）：
1.根元素(<html>)
2.浮动元素（元素的 float 不是 none）
3.绝对定位元素（元素的 position 为 absolute 或 fixed）
4.行内块元素（元素的 display 为 inline-block）
5.表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
6.表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
7.匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-8.footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
9.overflow 值不为 visible 的块元素
10.display 值为 flow-root 的元素
11.contain 值为 layout、content或 paint 的元素
12.弹性元素（display为 flex 或 inline-flex元素的直接子元素）
13.网格元素（display为 grid 或 inline-grid 元素的直接子元素）
14.多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
15.column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
bfc元素所具有的特性
1.内部的盒子会在垂直方向上一个接一个的放置。（类似标准流）
2.垂直方向上的距离由margin决定 （类似标准流）
3.bfc的区域不会与float的元素区域重叠。（比如等分布局可以用到）
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
说了这么多肯定都懵逼了，看看具体的一些应用
1.解决css嵌套盒子外边距合并的问题（塌陷问题）。
嵌套盒子外边距塌陷指的是，当一个盒子嵌套在另一个盒子中的时候，子盒子设置margin值之后，父盒子也会跟着掉下来
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
}
div {
display: block;
width: 300px;
height: 200px;
background-color: blue;
}
span {
display: block;
width: 180px;
height: 80px;
background-color: red;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
这时候就可以创建新的BFC避免两个相邻盒子外边距产生合并问题
几种解决办法：
1：父容器：border：1px solid;（不能是0px）
2：父容器：overflow: hidden;（或auto）
3：父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）
4：父容器或子容器： float：left；（不能是auto）
5：父容器或子容器：position：absolute；
6：子容器：display：inline-block;(或是inline-table)
7：相邻元素：任意一个添加float：left（不能是auto）
2.解决因浮动造成的父元素上移问题
这个很常见 给父元素加一个clearfix类名 创建一个BFC区域清除浮动
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
div {
display: block;
width: 300px;
background-color: blue;
}
span {
display: block;
width: 180px;
height: 80px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<span></span>
</div>
</body>
</html>
