BFC与IFC

盒子

格式化上下文

外部显示类型（display-outside）

1
规定盒子如何与统一格式上下文中的其他元素一起显示

内部显示类型（ display-inside ）

1
2
3
规定盒子内部布局方式，比如
display:    flex    (外部显示为block ) 参与BFC（块级格式化上下文）
display:inline-flex (外部显示为inline) 参与IFC（内联级格式化上下文）
BFC

块级格式化上下文

FC（Formatting Context）（格式化上下文）

所有的盒子都属于FC

可能属于一个BFC（block）(div/p/h1)、也可能是IFC（inline）(a/span/i/img)

会生成BFC的情况

image-20241104160610394.png

BFC的作用

帮助盒子一个挨着一个沿着垂直方向排布

margin就是由BFC来解析的

两个盒子都设置margin时候会折叠，就是BFC在起作用

1
在同一个BFC里，两个盒子的margin才会折叠
1
HTML可以形成标准流，因为本身就是一个独立的BFC环境
1
在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的

BFC可以解决

1
2
margin的折叠问题
浮动的高度塌陷问题
形成新的BFC
1
2
//只要overflow: !!不是!! visible
可以是 auto/hidden/scroll

解决折叠问题

1
2
3
4
5
6
7
8
9
//父级包裹两个元素
div content
    div item
    div item
div
//css创建BFC
.content{
    overflow: auto;
}

解决浮动高度塌陷

条件

1
2
//父元素触发BFC，形成独立块级格式化上下文
//父元素高度为auto

BFC的计算方式

1
2
3
1.如果只有inline-level，是行高的顶部和底部的距离
2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
3.如果有绝对定位元素，将被忽略;
1
4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
overflow
1
2
3
4
5
6
overflow: visible;  //可见
overflow: hidden;   //隐藏(可滚动的容器)
overflow: clip;     //剪辑(禁止滚动)
overflow: scroll;   //滚动(浏览器总是显示滚动条)
overflow: auto;     //自动(如果内容溢出，则浏览器提供滚动条)
overflow: hidden;   //覆盖(滚动条绘制在内容之上，而不是占据空间)
IFC

内联级格式化上下文

1
2
3
盒子会从包含块的顶部开始，按水平排列
这些盒子可以以不同的方式对齐
包含一串盒子的矩形区域就是一个 “线条框(line box)”
对齐方式

image-20241110155405765.png

image-20241110155807497.png

image-20241110160000770.png

层叠上下文

对HTML元素的三维构想，基于用户界面z轴的上下排布

1
对于浏览器渲染过程的“渲染层(render layer)”
层叠水平

也就是层叠顺序

image-20241110164351519.png

1
2
z-index只能在同一个层叠上下文比较
子元素的z-index无法超过父元素的z-index顺序