CSS规范
-
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
-
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
-
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
MDN
-
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
-
一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
-
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
-
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
张鑫旭对BFC的理解
那么BFC到底是个啥？？？
无定义，只有特征
不知道该咋说BFC，但是写出来了就知道是不是BFC
完整代码🔗
.baba {
border: 1px solid #bd1000;
min-height: 10px;
}
.erzi {
background: pink;
height:200px;
width:200px;
float: left;
}
加了
float后父级元素无法包裹住子级元素
那该如何解决？
1.让父级元素浮动
2.绝对定位的元素
3.非块盒的块容器
4.'overflow'不为'visible'的块盒
5.表格单元格
6.display: flow-root
display:flow-root可以让元素块状化，同时包含格式化上下文BFC，可以用来清除浮动，去除margin合并，实现两栏自适应布局等。
好像不管用什么，都要给功能属性，就好比如我只想洗个头，你能不能别老师在我耳边一直说办卡不=-=，或者有的地方必须要办卡才会有优惠，靠！
不过我还是遇到有不办卡的店店，就很舒服，那么 display: flow-root ，它可以让当前元素触发BFC，没有其他的任何副作用！！！（不办卡）
那么兼容性咋样？
基本可以使用了，比刚刚出来的时候好多了（兼容IE？？？告辞😳🚑）。
终于改掉了不正交的臭毛病，（不正交：吃饭的时候让你办卡，洗头的时候让你办卡，明明只想做一个事确非要给你弄其他的）
总结
BFC说的是这个div的属性，里面的东西不会变，文档流说的是排列顺序，BFC本身也可以是文档流，它可以包含文档流和浮动等一些元素，也就时说BFC影响的是一个元素的宽高，而文档流影响的是排列顺序，显然两者没啥关系。任何情况都可以不用BFC，用其他法子是可以解决的。
功能
- 父级元素管子级元素，用BFC包住浮动元素（不是清除浮动，清除浮动的时候要用clearficx,别用BFC,除非所用的属性已经被所浏览器支持了）
- 兄弟元素之间划清界限
如何解释BFC
解释不了，也不要和面试官说是什么，因为它没有被定义，只有功能（每个人理解定义不一样），那如何回答？用代码回答，怎样可以写出BFC就行。
