.clearfix::after 必须写 content: ""，否则伪元素不生成导致父容器塌陷；display: table 比 block 更稳因其天然创建BFC、避免外边距合并；边框异常常因 transform、负 margin 或清除作用域错位所致；现代布局（flex/grid）常比 float + clearfix 更简捷可靠。
.clearfix::after 必须写 content: ""，否则伪元素根本不生成，父容器照样塌陷——这不是兼容性问题，是渲染机制决定的。
为什么 content: "" 不可省略
伪元素（::before / ::after）不会被浏览器渲染，除非 content 属性存在且值非 none。漏掉这行，整个清除逻辑就失效：
-
content: none或完全不写 → 伪元素不生成，display和clear都没机会执行 -
content: " "（空格）→ 可能引入不可见空白字符，影响行高、垂直对齐或边框位置 -
content: ""是唯一无副作用、可预测的取值
display: table 比 display: block 更稳的原因
很多教程用 display: block + clear: both，但在 IE8、嵌套较深的 flex 容器内或有 line-height 继承的场景下容易出错：
-
display: table天然创建匿名 BFC，比block更可靠地隔离浮动影响 - 避免外边距合并（margin collapse），防止父容器顶部/底部边框“被吃掉”
- 在 transform 或 position: relative 的父容器中，
display: block有时会忽略clear，而table仍生效
边框一致性被破坏的常见诱因
即使伪元素写对了，父容器的边框仍可能“断开”或“偏移”，根源往往不在清除本身：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
transform（如scale(1)）但未显式声明width/height→ 伪元素尺寸计算异常，导致边框渲染错位 - 子元素用了
float+ 负margin→ 浮动脱离文档流后，伪元素清除位置不准，边框无法包裹真实内容区域 -
.clearfix类没真正应用到最外层浮动容器上，而是加在了中间某层 → 清除作用域错位，边框只包住部分子元素
真正该优先检查的点
别急着修 ::after，先确认这个浮动是不是本就不该存在：
- 如果只是为了多列布局，
display: flex或display: grid能天然撑开父容器，无需清除 - 如果是为了图文环绕，
float仍合理，但需确保父容器没有意外触发 margin collapse 或 transform 干扰 - 边框不一致时，打开 DevTools 查看 computed styles，重点核对伪元素的
height（应为 0）、clear（应为 both）、display（应为 table）是否全部生效
复杂点从来不是怎么写 ::after，而是判断浮动是否仍是当前场景下最简解法——多数时候删掉 float 改用现代布局，比反复调试清除逻辑更省事，也更不容易让边框“消失”。
