在了解BFC(Block Formatting Context)之前，我们先来看看FC(Formatting Context)
之前从w3c网记住了几个特性：
- 所有的盒子都属于一个FC。
- 块级元素的布局属于一个BFC，块格式化上下，文包含创建它的，元素内部的，所有内容 。例如div标签/段落p标签/h1等 > BFC布局中。
- 行内级元素的布局属于一个IFC。例如 img 图片标签/A链接/SPAN标签 / B标签 -> IFC布局中
- 简单理解：块级元素所在的布局和上下文就是BFC，行内级元素所在的布局和上下文就是IFC。
那么很多人听到这会有疑问，块级元素都是在BFC中布局的，那么这个BFC在哪里呢
1.根元素(html会创建BFC)
2.浮动元素(元素的float值不是none)
3.绝对定位元素（position为absolute绝对定位)
4.行内块元素(元素的display为inline-block)
5.表格单元格(元素的display为table-cell，HTML表格单元格默认为该值，表格标题(元素的display为table-caption，HTML表格标题默认为该值)row，tbody，thead，tfoot的默认属性)或inline-table)
6.overflow计算值(Computed)不为visible的块元素
7.弹性元素(display为flex或inline-flex元素的直接子元素)
8.网格元素(display为grid或inline-grid元素的直接子元素)
9.display值为flow-root的元素**
BFC的作用：
也就是在一个BFC的盒子，会从所在的盒子块的最顶部开始，在盒子的垂直方向上一个挨一个的摆放咱们写的标签，我们平常不太会注意这点，感觉这是没写样式，堆积的现象是正常的，但这却是BFC帮助我们实现的。
当我们对某个盒子设置一个margin-top的时候，BFC会帮助我们解析，然后会在盒子布局时候给一个上边距，在一个BFC中，每个元素的左边缘都会紧贴着当前块的左边缘。这都是BFC的影响。
创建 BFC 就像给元素加了一层隔离带一样。在 BFC 内部的块级元素，仍然遵守一样的摆放规则，但是里面的标签元素没办法超出自己所属的 BFC 容器，也就是某一个BFC里面的元素，被外面的BFC容器禁锢着，对外面的标签来说，这个创建了 BFC 的元素，和盒子里面的所有的子元素，都被当成了一个唯一独立的个体对待。 两者互不相干。
基于 BFC 这种“隔离带的”特性，一般用来做以下两件事：
1.用来实现清除浮动。比如一个大的div元素内想要浮动一下子元素，但是导致高度塌陷，可以给这个元素添加 overflow：hidden。 可以实现包裹浮动子元素。（因为创建了 BFC，不允许块级内部超出自己的边界）。
2.阻止父子元素外边距折叠，父子块级元素如果没有设置边框和padding外边距，外边距会产生折叠。给父元素添加 overflow：hidden 后会阻止父子元素外边距折叠。
在我们日常写代码的过程中可能不会去考虑什么是BFC，但是事实上就创建了一个BFC。
理解 BFC 的这一特性也能让我们简化 CSS 的写法，给我们在编写页面布局的时候带来一定影响。
总结一下：
，只有当这个元素满足条件的时候才会成为一块BFC区域。不同的BFC区域之间是相互独立的，互不影响的。BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
