请教关于bfc(块格式上下文)的一些问题?
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>
回复
1个回答
test
2024-06-29
第一个问题属于display: flow-root;你定义了就开启了BFC,第二个问题在BFC里,块级盒子是按照垂直方向排的,内联盒子在内联格式上下文(IFC)里水平排的。所以,你的span元素实际上是在IFC里。第三个问题和上个问题有关,BFC确实规定了块级盒子是垂直排的,但也没说BFC里不能有水平排的元素。换句话说,BFC可以包含IFC,而在IFC里的内联元素会水平排列。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容