clearfix用于修复浮动导致的父容器塌陷，必须加在浮动元素的直接父容器上；现代推荐用display: flow-root替代，它通过创建bfc自然包含浮动子元素，更安全高效。
clearfix 是用来修复父容器塌陷的，float 是让子元素脱离文档流
很多人一看到 .clearfix 和 .float-left 都带 “float”，就以为它们是一类东西——其实完全不是。前者是“救火队员”，后者是“肇事者”。float 属性会让元素向左/右偏移、其他内容环绕它，但代价是父容器可能高度变成 0（塌陷）；而 .clearfix 的唯一使命，就是让这个塌陷的父容器重新“感知”到浮动子元素的存在，把高度撑起来。
常见错误现象：
— 父容器背景色没显示、边框看不见
— 后续兄弟元素向上“爬”进了浮动区域
— Flex/Grid 布局被意外打断（因为浮动元素仍处于文档流外）
-
.float-left/.float-right直接作用于浮动元素本身，等价于float: left -
.clearfix必须加在**浮动元素的直接父容器**上，否则无效 - Bootstrap 5+ 中
.clearfix仍保留，但已不推荐用于新布局——它只是兼容旧 float 场景的兜底方案
用 display: flow-root 替代 clearfix 更干净
Bootstrap 的 .clearfix 内部用的是伪元素 + clear: both，本质还是为 float 服务的老办法。现代解法根本不需要清浮动：只要让父容器形成 BFC（块级格式化上下文），它就能自然包含所有浮动子元素。
实操建议：
— 直接给父容器加 display: flow-root（Bootstrap 5+ 已内置该工具类 .d-flow-root）
— 它比 overflow: hidden 安全（不会意外裁剪阴影、下拉菜单等溢出内容）
— 比 .clearfix 少 DOM 干预、无伪元素开销、语义更直白
-
display: flow-root兼容 Chrome 64+/Firefox 59+/Safari 15.4+，2026 年已无兼容顾虑 - 若项目还需支持 IE11，请继续用
.clearfix（Bootstrap 4/5 均保留） - 不要混用：
.clearfix+display: flow-root不冲突，但纯属冗余
Float 辅助类在 Bootstrap 中的实际使用场景很窄
现在写响应式布局，.float-left 这类辅助类几乎只出现在两类地方：一是老项目维护中替换内联 style="float:left"；二是极少数需要文字环绕图片的语义化排版（比如新闻详情页的头图）。
容易踩的坑：
— 在 Flex 或 Grid 容器内部再用 .float-left，会导致子元素行为不可预测（浮动会脱离 flex item 的控制）
— .float-none 不是“清除浮动”，它只是设 float: none，对父容器塌陷毫无帮助
- 响应式浮动类如
.float-md-left只在 ≥md 断点生效，小屏自动回退为普通流，这点比手写媒体查询方便 - Bootstrap 5 废弃了
.pull-left/.pull-right（曾用!important强制覆盖，易引发样式冲突） - 如果只是为了左右排列两个块，优先用
.d-flex .justify-content-between，而非 float
为什么你写的 clearfix 有时没效果？
最常见的失效原因不是代码错，而是加错了位置。比如把 .clearfix 加在 grandparent 上，而浮动元素实际在 parent 里——那 parent 依然塌陷。
另一个隐蔽问题：某些 CSS 重置库或框架（如 Normalize.css）会把 html 或 body 设为 display: flow-root，此时再套一层 .clearfix 看似有效，实则掩盖了结构问题。
- 检查浮动元素是否真的在目标父容器内（用浏览器开发者工具高亮父容器边界）
- 确认没有其他规则覆盖了
::after伪元素，比如全局设置了*::after { display: none } - 如果用了 Sass/Less，注意
.clearfix类是否被条件编译剔除了（Bootstrap 5 默认启用）
