transform会触发新bfc，使浮动子元素脱离父容器布局流，导致父容器塌陷、clearfix失效；overflow:hidden等父级bfc创建方式亦无效，因子元素已自建bfc。
transform 会触发新的 BFC，导致父容器不再“感知”浮动子元素
当你给一个浮动元素加了 transform（比如 transform: translateX(0) 或 transform: scale(1)），浏览器会为它创建一个新的**块级格式化上下文（BFC）**。这个新 BFC 把该元素和它的后代完全隔离——包括它原本参与父容器高度计算的“浮动行为”。结果就是：父容器再次塌陷，::after 清除浮动失效，overflow: hidden 也救不了。
这不是 bug，是规范行为。CSS 规范明确指出：任何能创建 BFC 的属性（float、position: absolute、display: flow-root、transform、opacity 等）都会让元素脱离当前 BFC 的布局流，而浮动依赖的就是父容器这个 BFC 来“收容”自己。
-
transform值只要不为none，就触发 BFC —— 即使是transform: translateZ(0)这种“无视觉变化”的写法也一样 - 清除浮动的伪元素（如
.clearfix::after）只对同一 BFC 内的浮动生效；一旦子元素自建 BFC，它就“出圈”了 - 用
overflow: hidden给父容器强制创建 BFC 也没用——因为子元素的 BFC 已经独立，父容器的 BFC 不再包含它的几何尺寸
常见误判场景：明明写了 clearfix，却还是塌陷
你可能遇到这样的代码：
.parent {
border: 1px solid #000;
}
.parent::after {
content: '';
display: block;
clear: both;
}
.child {
float: left;
width: 200px;
height: 100px;
background: red;
transform: translateX(0); /* ← 就是这行让 clearfix 失效 */
}
现象：父容器高度仍是 0，背景/边框消失，后续元素上移。原因不是 ::after 没生效，而是 .child 已不在父容器的 BFC 中“贡献高度”。
- 检查是否无意中给浮动子元素加了
transform、opacity、filter、will-change等任意触发 BFC 的属性 - 用浏览器开发者工具的“Computed”面板看该元素的
display和contain，确认是否生成了新 BFC（通常会标为 “establishes a new formatting context”） - 临时注释掉
transform，观察父容器高度是否恢复——这是最直接的验证方式
替代方案：绕过 transform + float 的组合
如果你确实需要动画或位移效果，又得保持父容器正确撑高，就别把 transform 和 float 套在同一元素上。
- 用
display: inline-block或display: flex替代float布局，再对子项加transform—— 完全无冲突 - 如果必须用
float（比如兼容老项目），就把动效移到父容器上：.parent { transform: translateX(10px); }，而不是浮动子元素本身 - 改用
display: flow-root给父容器（现代标准），它比clearfix更可靠，且不受子元素 BFC 干扰；但注意 IE 不支持
为什么 overflow: hidden 在这里也不起作用？
很多人第一反应是给父容器加 overflow: hidden，但它在此场景下无效，因为：
-
overflow: hidden是让父容器自身创建 BFC，从而包裹内部浮动元素 - 但当子元素自己已创建 BFC 后，它就不再“属于”父容器的 BFC，父容器的 BFC 对它没有约束力
- 此时父容器的 BFC 只包裹“非 BFC 子元素”，而浮动子元素在自己的 BFC 里自成一体，高度不反馈给父级
真正容易被忽略的是：清除浮动本质是 BFC 协作问题，不是样式叠加问题。一旦子元素“单飞”，所有基于父容器 BFC 的清除手段都会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
