clearfix必须加在浮动元素的直接父容器上，加错位置会失效；正确用法是父容器设clearfix，子元素单独浮动；现代布局推荐display: flow-root替代。
clearfix必须加在浮动元素的直接父容器上
加错位置是失效最常见原因。.clearfix不是用来修饰浮动子元素的，它只对父容器生效——因为塌陷发生在父级高度计算阶段，子元素自己再怎么“清”，也改变不了父容器看不见它的事实。
常见错误写法：<div class="float-left clearfix">内容</div>，这完全无效；正确写法是：<div class="clearfix">
<div class="float-left">A</div>
<div class="float-right">B</div>
</div>。
- 如果父容器已设
height或min-height，塌陷被掩盖，容易误判为“不需要” - 父容器用了
display: flex或display: grid，.clearfix会被忽略（现代布局天然不塌陷） - 父容器本身有
overflow: hidden等样式，可能覆盖伪元素行为，且会裁剪position: absolute子元素
Bootstrap 4/5 的 clearfix 实现差异直接影响兼容性
Bootstrap 4 的 .clearfix 包含 zoom: 1（IE8 兼容 hack），而 Bootstrap 5 已移除，仅保留 ::after { content: ""; display: table; clear: both; }。两者都依赖伪元素触发 BFC，但混用旧 CSS 文件会导致行为不一致。
实操建议：
- 项目明确不支持 IE11 → 直接用 Bootstrap 5 的
.clearfix，轻量无冗余 - 仍需兼容 IE11 → 确保加载的是 Bootstrap 4 或手动补一段兼容写法：
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } - 检查 DevTools 中最终生效的样式，确认没被其他 CSS 覆盖或重置
display: flow-root 比 clearfix 更干净，但要注意浏览器支持
display: flow-root 是原生 CSS 方案，它让容器创建 BFC，自然包含浮动子元素，不插入伪元素、不干扰溢出内容（比如下拉菜单、阴影、transform 位移）。Bootstrap 5+ 提供了 .d-flow-root 工具类，语义更直白。
兼容性方面：
- Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+ 均支持，2026 年已无实际兼容顾虑
- IE 完全不支持，若项目仍跑在 IE11 上，不能只靠
d-flow-root -
.d-flow-root和.clearfix可共存，但没必要：加了d-flow-root后，.clearfix的伪元素不会起作用，纯属冗余
栅格中 row 自带 clearfix，但跨行或响应式错位时需手动干预
Bootstrap 的 .row 类内部已继承 .clearfix 行为（通过 LESS mixin），所以正常写法无需额外加。但遇到列高不一致导致换行错位（比如第二列特别高，第三列被卡在右侧空白处），就得主动打断浮动流。
典型场景和做法：
- 同一
.row内混用不同断点列宽（如.col-xs-12 .col-md-6 .col-lg-4），中屏下某列变窄后高度突增 → 在该列后加<div class="w-100 d-md-block d-lg-none"></div>（Bootstrap 5 推荐写法，替代已废弃的.visible-md-block） - 多个
.col-*直接丢进没包.row的容器 → 必须补.row或手动加.clearfix，否则第三列可能掉到第一列下方 - 不要用
.d-none或.invisible替代清除行为，它们不带clear，解决不了错位
真正难处理的不是怎么加 clearfix，而是旧代码里那些隐式依赖浮动高度的 JS 逻辑——比如用 offsetHeight 获取容器高度做动画，一旦你换成 display: flex，这个值可能突然变成 0 或异常，得连着 JS 一起查。
