z-index: 0 不能修复 Safari 下的浮动重绘 Bug，反而可能加剧问题——它既不触发 BFC，也不隔离渲染层，纯属无效操作。
为什么 z-index: 0 对浮动重绘完全没用
浮动元素本身不创建层叠上下文，而 z-index 只在已定位元素（position 为 relative、absolute 或 fixed）上生效。给一个普通浮动元素加 z-index: 0 不会改变其层叠行为，更不会影响 WebKit 的合成层决策逻辑。
实测表明：在 Safari 17.4 中对 .item { float: left; z-index: 0; } 加该声明，computed 面板里 z-index 仍显示为 auto，且重绘帧耗时无任何改善。
- 浮动 +
z-index组合在规范中无定义行为，不同浏览器解析不一致 - Safari 不会因
z-index: 0创建新图层，也就谈不上“稳定重绘” - 若元素本就未定位，加
z-index属于冗余 CSS，还可能干扰后续transform动画的层提升判断
Safari 浮动重绘的真实诱因是合成层分裂
问题核心在于：Safari（WebKit）对 float 元素与 transform、opacity、will-change 或父容器 overflow: hidden 的组合极其敏感，容易为同一元素反复创建/销毁合成层。
典型现象包括：
- 滚动时侧边栏闪烁（
float: left+will-change: transform） - 鼠标悬停改变
margin触发整层重绘（而非局部更新） -
transform: translateZ(0)后性能反而下降 4 倍以上（见 M1 实测数据）
真正有效的替代方案：用现代布局取代浮动
浮动不是必须保留的遗产，而是可被精准替代的过时机制。关键不是“怎么修浮动”，而是“怎么不用浮动”。
- 图文环绕等少数场景：改用
shape-outside+float（仅当真需流式绕排） - 多列/侧边栏布局：直接上
display: flex或display: grid，子元素float会被自动忽略 - 需要包裹浮动子项的父容器：用
display: flow-root（iOS 15.4+ / macOS 12.3+ 全支持），语义明确、零裁剪副作用 - 若必须兼容老环境：用
overflow: auto替代hidden，至少保留滚动能力
最容易被忽略的细节：清除浮动 ≠ 解决重绘
很多人看到“父容器高度塌陷”就急着加 clearfix 或 overflow，但这只解决视觉包裹，不解决 Safari 底层的图层管理缺陷。真正的重绘卡顿来自 WebKit 对浮动参与合成的保守策略——它宁可多建层，也不愿复用旧层。所以，别在浮动上打补丁，直接换掉浮动本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
