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

作者站长头像
站长
· 阅读数 4

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

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

上面的文章写到: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>

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

回复
1个回答
avatar
test
2024-06-29

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容