clearfix 仍在用是因为需兼容老项目或不可控HTML，但 display: table 已淘汰——它触发BFC且破坏布局；现代推荐用 .clearfix::after { content: ""; display: table; clear: both; }，轻量无副作用。
为什么 clearfix 还在用，但不用 display: table 了
因为 display: table 触发的是 BFC，但副作用太强：它会让元素变成表格框模型，width 行为异常（比如设 100% 会撑开父容器），且无法和 flex 或 grid 父容器良好共存。现代清除浮动只依赖伪元素 + clear，轻量、可控、无布局污染。
常见错误现象：display: table 清除后，父容器高度正常了，但子元素的 margin 不折叠、vertical-align 生效、甚至响应式断点错位。
- 旧写法：
.clearfix { display: table; }—— 已淘汰，仅见于老项目维护 - 过渡写法：
.clearfix::after { content: ""; display: block; clear: both; }—— 兼容 IE8+，但需注意content不能为空字符串（IE7- 不支持空content） - 推荐写法：
.clearfix::after { content: ""; display: table; clear: both; }——display: table在这里只是让伪元素“生成一个块级盒”，不改变父容器模型，比block更稳妥（避免某些 IE 下的行高问题）
::after 清除浮动时，content 和 display 怎么配才不出错
关键不是“清没清掉”，而是“清得干不干净、有没有副作用”。content 必须存在（哪怕只是空格），否则伪元素不渲染；display 选 table 比 block 更兼容老浏览器，且不会意外继承父级的 line-height 或 font-size。
使用场景：需要兼容 IE8–IE11 的项目；或父容器本身是 inline-block / table-cell，此时 display: block 伪元素可能引发基线对齐问题。
立即学习“前端免费学习笔记（深入）”；
- 必须写：
content: ""（双引号不能省，IE8 要求非空） - 推荐写：
display: table（比block更中性，不触发新格式化上下文以外的副作用） - 不要写：
height: 0; overflow: hidden;—— 这是 BFC 方案，和伪元素方案混用反而容易冲突
现在还该手动加 clearfix 类吗
大多数情况不该。CSS Grid 和 Flexbox 布局天然不依赖浮动，float 本身已退化为文字环绕（float: left/right）或历史兼容用途。只要你不写 float: left 做布局，就根本不需要 clearfix。
性能影响几乎为零，但维护成本真实存在：每个浮动容器都得加类，漏一个就塌陷；重构时还要逐个检查是否冗余。
- 该用的时候：维护老项目、CMS 输出不可控 HTML（如 WordPress 小工具）、第三方富文本插入的浮动图片
- 不该用的时候：新项目用
display: flex排版导航、卡片、表单；或用display: grid做响应式栅格 - 替代方案：对单个浮动元素，直接在父容器上设
overflow: auto（触发 BFC）——简单粗暴，但可能截断position: absolute子元素
IE6/7 的 zoom: 1 还有必要保留吗
没必要。IE6/7 已无实际兼容需求，连微软官方都早在 2016 年终止支持。强行保留 zoom: 1 只会让 CSS 更难读，且现代打包工具（如 PostCSS）默认剔除 IE 专有属性。
容易踩的坑：复制网上老旧的 clearfix 片段时，顺手把 *zoom: 1 也粘进去了，结果在审查工具里看到无效属性警告，还误以为是自己写错了。
- 当前主流写法只需两行：
::after伪元素 +clear: both - 如果项目明确不支持 IE8 以下，连
display: table都可简化为display: block - 真正要警惕的不是写法过时，而是还在用浮动做整页布局 —— 那才是技术债的源头
浮动清除的本质，从来不是“怎么写更优雅”，而是“为什么非得用浮动”。一旦开始问这个问题，clearfix 就自然退场了。
