给浮动容器加 will-change: transform 无效，因其未触发合成层；必须配合 transform: translatez(0) 强制 gpu 合成，二者缺一不可。
浮动布局本身不会直接导致锯齿，但和 border-radius、transform 等组合时，渲染层切换异常会暴露像素对齐问题——will-change: transform 单独用通常无效，必须配合硬件加速触发条件。
为什么给浮动容器加 will-change: transform 没用
浮动元素（float: left）默认在普通文档流中渲染，不进入合成层；will-change: transform 只是“提示”浏览器未来可能变化，但若元素没实际触发 transform 或 opacity 等可合成属性，浏览器大概率忽略该声明。常见误操作是只写这一行，却不加任何真实 transform 值。
- 仅设置
will-change: transform不会强制创建新图层，DevTools 的 Layers 面板里看不到新增合成层 - 浮动父容器若未触发 BFC（如没设
display: flow-root），内部浮动子元素仍处于不稳定布局状态，此时加will-change属于“提前优化错对象” - 部分旧版 Chrome（≤95）对
will-change在浮动上下文中的行为支持不一致，可能引发重绘抖动而非修复锯齿
真正起作用的组合：浮动 + transform: translateZ(0) + will-change
要让浮动相关区域（比如带圆角的浮动卡片）渲染更清晰，关键不是单独声明 will-change，而是先用 translateZ(0) 强制提升为合成层，再用 will-change 做预判。两者缺一不可。
-
transform: translateZ(0)是实际触发 GPU 合成的最小代价操作，比rotate(0deg)更轻量 -
will-change: transform应放在同一选择器中，且必须在translateZ(0)存在的前提下才有意义 - 若元素本身已有其他 transform（如
rotate(15deg)），直接追加translateZ(0)即可，无需额外加will-change
示例：
.card {
float: left;
border-radius: 8px;
transform: translateZ(0);
will-change: transform;
}
比 will-change 更稳妥的替代方案
对于浮动布局中出现的圆角锯齿、旋转边缘模糊等问题，优先考虑语义明确、副作用少的方案，而不是依赖 will-change 这种提示型属性。
- 圆角锯齿：改用
display: flow-root替代overflow: hidden触发 BFC，避免裁剪风险；再配合backface-visibility: hidden提升合成稳定性 - 旋转锯齿：直接写
transform: rotate(45deg) translateZ(0)，删掉孤立的will-change声明——现代浏览器已能自动识别并优化这类 transform 组合 - 文字/渐变锯齿：浮动无关，应查字体渲染（
-webkit-font-smoothing: antialiased）或渐变过渡点（如把50%, 50%改成49.5%, 50.5%）
真正容易被忽略的是：浮动布局下，will-change 不是“开关”，它只是个建议。是否生效，取决于元素是否已处于可合成状态、是否有真实 transform 动作、以及父级是否已建立稳定布局上下文。别把它当万能膏药贴在 float 元素上就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
