请教关于bfc(块格式上下文)的一些问题？

Question

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flow_lay...

上面的文章写到:
1.常规流中：块级盒子是在块格式上下文（BFC）中的,而内联盒子是在内联格式上下文中的（IFC）;
2.块格式上下文（BFC）中，盒子是垂直排列的；
3.内联格式上下文（IFC）中，盒子水平排列；

那么问题来了：
例子：通过display:flow-root,声明一个bfc;
问题：
1.这个BFC是不是属于常规文档流？
2.在这个BFC中，内联盒子sapn是属于BFC还是IFC？
3.不是说BFC中的盒子是垂直排列吗？实际上这个BFC中的内联盒子sapn是水平排列的

.BFC {
  display: flow-root;
}
.BFC span {
  background-color: aqua;
}
.BFC span:nth-child(2) {
  background-color: red;
}
.BFC div {
  height: 60px;
  background-color: blueviolet;
}
<div class="BFC">
    <span>我是span1</span> <span>我是span2</span>
    <div>我是div</div>
 </div>

Answer 1

第一个问题属于display: flow-root;你定义了就开启了BFC，第二个问题在BFC里，块级盒子是按照垂直方向排的，内联盒子在内联格式上下文（IFC）里水平排的。所以，你的span元素实际上是在IFC里。第三个问题和上个问题有关，BFC确实规定了块级盒子是垂直排的，但也没说BFC里不能有水平排的元素。换句话说，BFC可以包含IFC，而在IFC里的内联元素会水平排列。

Answer 2

垂直排列指的就是流式布局