浮动 Float · 共享浮动图层

所有设置了 float 的元素,都会从文档流图层升起,进入同一个共享的浮动图层。 在这个浮动图层上,它们互相感知对方的位置,按浮动方向依次排列。原位置被释放,后续元素前移填补。

💡 关键:浮动元素共享同一层,不是各自独立漂浮
1 同一图层
2 A 升起
3 后续前移
4 B 也升起
5 C 也升起
3D 图层舞台
📄 文档流图层 · Document Flow
A
B
C

文字内容留在文档流图层上,会环绕浮动元素 —— 这是浮动最初的用途。

🌊 共享浮动图层 · Shared Float Layer
文档流图层
共享浮动图层

图层栈

从下到上叠加,最上层离用户最近
🌊 共享浮动图层
当前为空
📄
文档流图层
A、B、C 依次排列
BASE
Z 轴
z: 0

手动控制

单独控制每个元素的浮动状态
/* 当前 CSS */ .box-a { float: none; } .box-b { float: none; } .box-c { float: none; }

🤖 AI 代码诊断导师