这篇文章是我对BFC的理解和借鉴其他优秀文章中的一些总结，希望让大家有收获。
一、何为BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
二、形成BFC的条件
1. float 除了none以外的值
2. overflow 除了visible 以外的值（hidden，auto，scroll ）
3. display (table-cell，table-caption，inline-block, flex, inline-flex)
4. position值为（absolute，fixed）
5. fieldset元素
三、BFC的特性
1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box叠加。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也参与计算。
说了一些概念性的东西大家肯定云里雾里，下面我们看一看那些场景会用到BFC
四、BFC的运用
1.解决margin叠加问题
2.用于布局
3.清除浮动
等一些其他用途，下面我将会列出几个对BFC讲解很详细的博客，大家也可以参考该内容
https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html