现代项目用.clearfix::after{content:"";display:table;clear:both}就够了；若兼容IE6–7需加*zoom:1，其他写法多余或失效。
直接说结论：现代项目用 .clearfix::after { content: ""; display: table; clear: both; } 就够了；若还要兼容 IE6–7，加一行 *zoom: 1 即可。其他写法要么多余，要么在某些浏览器里根本不起作用。
为什么只靠 ::after 不一定清得掉浮动
伪元素本身不渲染，除非满足两个硬性条件：有 content 值（哪怕空字符串），且 display 是块级行为（table、block 等）。常见失效原因包括：
-
content: ;写成无引号空值 → 浏览器忽略整条声明，伪元素压根不生成 - 父容器本身是
display: inline或inline-flex→clear: both只对块级框生效，此时无效 - 父容器设了
overflow: hidden或float→ 它自己已触发 BFC 或脱离文档流，::after的清除逻辑被绕过或隔离 - 用了单冒号写法
:after而文档是 HTML5 严格模式 → Safari 5.1 以下、IE8 会不识别
display: table 比 display: block 更稳妥的原因
两者都能让伪元素成为块级盒，但差异在布局上下文：
-
display: table天然创建匿名 BFC 容器，不会继承父级的line-height或vertical-align，避免意外间隙或高度异常 -
display: block在某些嵌套场景（比如父容器是font-size: 0或含line-height）下可能因行内格式化上下文干扰，导致撑高失败 -
display: inline-block绝对不要用——它受空白符影响，且不建立 BFC，清除效果不可靠
IE6–7 兼容必须加 *zoom: 1，但不是所有项目都需要
IE6/7 不支持 ::after，但支持私有属性 *zoom: 1 触发 hasLayout，让容器“感知”浮动子项。是否要加，取决于你的兼容目标：
立即学习“前端免费学习笔记（深入）”；
- 维护老系统（如仍在跑 IE7 后台）→ 必须加
*zoom: 1，且确保放在.clearfix规则体里，不能只写在::after下 - 目标浏览器是 IE8+ 或现代环境 → 这行可删，
::after本身已覆盖全部主流版本 - 用 CSS-in-JS 或 Shadow DOM →
::after可能因作用域限制不生效，这时*zoom: 1也救不了，得换布局方案
现代项目里，clearfix 还值得写吗
不是“要不要写”，而是“有没有必要用”。关键看三点：
- 如果父容器已是
display: flex或display: grid→ 浮动不影响高度，clearfix完全多余 - 如果混用浮动和传统块流（比如图文环绕、老式栅格）→ 仍需保留，但建议只在明确需要的地方加类，别全局挂载
- 如果子元素用了负
margin-top或父容器有transform/filter→::after的clear行为可能被层叠上下文隔离，这时候得优先重构布局，而不是堆 hack
最常被忽略的一点：clearfix 解决的是“浮动塌陷”，不是“布局错乱”。如果问题本质是结构不合理（比如强行用 float 做响应式列），加再多伪元素也治标不治本。
