浮动 Float · 共享浮动图层
所有设置了 float 的元素,都会从文档流图层升起,进入同一个共享的浮动图层。
在这个浮动图层上,它们互相感知对方的位置,按浮动方向依次排列。原位置被释放,后续元素前移填补。
💡 关键:浮动元素共享同一层,不是各自独立漂浮
1 同一图层
2 A 升起
3 后续前移
4 B 也升起
5 C 也升起
3D 图层舞台
📄 文档流图层 · Document Flow
A
B
C
文字内容留在文档流图层上,会环绕浮动元素 —— 这是浮动最初的用途。
🌊 共享浮动图层 · Shared Float Layer
文档流图层
共享浮动图层
图层栈
从下到上叠加,最上层离用户最近
📄
文档流图层
Z 轴
z: 0
手动控制
单独控制每个元素的浮动状态
/* 当前 CSS */
.box-a { float: none; }
.box-b { float: none; }
.box-c { float: none; }