transform创建新层叠上下文会使::after的clear: both失效，因伪元素被隔离而无法感知浮动；display: flow-root可直接触发bfc，自然包裹浮动子项，避免层叠上下文干扰，且不裁剪溢出内容。
transform 创建新层叠上下文，让 ::after 伪元素的 clear: both 失效
当父容器同时设置 transform（如 translateY(-5px)）和 overflow: visible 时，::after 生成的清除元素会被隔离进一个新的层叠上下文，导致它“感知不到”前面的浮动元素——computed 中的 clear 值会变成 none，即使 DOM 树里能看到伪元素节点。
这不是伪元素没渲染，而是它的清除逻辑被层叠上下文切断了。开发者工具里能看见 ::after 节点，但检查样式时发现 clear 已被忽略。
- 只在父容器加
transform就可能触发，哪怕子元素没动 -
filter、will-change同样有此副作用，原理一致 - 这种失效是静默的：页面看起来“好像还行”，但父容器高度塌陷、后续布局错位
为什么 display: flow-root 是更直接的解法
display: flow-root 不依赖伪元素或清除逻辑，而是让父容器自身创建 BFC（块级格式化上下文），从而自然包裹浮动子项、正确计算高度。它绕开了所有与 transform 冲突的清除机制。
相比 overflow: hidden 或 .clearfix，它不裁剪 position: absolute 子元素，不干扰阴影，也不受层叠上下文干扰。
- 兼容性明确：Chrome 64+、Firefox 59+、Safari 15.4+（macOS 12.3 / iOS 15.4+）、Edge 110+
- 写法极简：
.container { display: flow-root; }，子元素照常float: left - 若需兼容 Safari 14 或旧 EdgeHTML，回退用
overflow: auto（不是hidden），配合max-height: none
别把 transform 加在浮动容器上——WebKit 下抖动风险极高
在 WebKit（尤其是 Safari 15–17、iOS WebKit）中，给已浮动的元素或其父容器加 transform: translateZ(0)，会强制创建独立图层，但定位基准不稳定，滚动时 subpixel 错位放大，表现为肉眼可见的卡顿、跳动，抖动幅度常达 0.3px 级别。
DevTools 的 Layers 面板里能看到该图层反复创建/销毁；开启 “Layer Borders” 后绿色闪烁频繁，就是过度分层信号。
- 错误做法：
.float-container { transform: translateZ(0); } - 更安全替代：
.float-container { backface-visibility: hidden; }——同样触发合成，但不新建 stacking context，不影响scroll-snap-align或position: fixed - 真正稳的方案：移除浮动，改用
flex或grid，彻底避开这个问题
现代布局下，浮动本身已是过时模式
Flex 和 Grid 容器中，float 属性被规范定义为“不参与布局计算”，computed 值会直接显示为 none。此时再讨论“清除浮动”已无意义——父容器不会塌陷，子元素对齐由 justify-content 或 order 控制。
混用浮动和 Flex/Grid 反而容易引发渲染异常，比如某个 flex-item 加了 float: left，可能破坏主轴对齐或触发意外重排。
- 文字绕图等经典场景，应改用
shape-outside+float（仅限真需要绕排时） - 侧栏、卡片流等布局，优先用
display: grid配合grid-template-areas或fr单位 - 历史项目迁移时，先查父容器
display值，比调子元素float更快定位问题根源
最易被忽略的一点：多个失效原因常叠加出现。比如 transform 导致 clearfix 失效，同时父容器又用了 display: flex，结果浮动子元素既不撑高、又被忽略、还因 overflow: hidden 裁剪了阴影——这时得一层层关掉样式才能揪出真正起作用的那条规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
