根本原因是content缺失或为none导致伪元素未渲染，且display未设为block/table等块级值；必须用content: ""+display: block/table组合才能生效。
伪元素 ::after 不显示高度的常见原因
直接原因是 content 值为空或无效，加上 display 类型不匹配，导致伪元素根本没被渲染出来——它压根就不存在，自然不会撑高父容器。
典型错误写法：::after { content: none; } 或漏写 content；又或者写了 content: " "（带空格），结果因空白字符触发行内格式化上下文，产生不可控的行高和基线偏移。
-
content: ""是唯一安全、无副作用的空内容写法 -
content: "."虽然能渲染，但需额外加visibility: hidden或height: 0避免视觉干扰 -
content: " "（空格）会生成一个真实空白字符，可能撑开行高，尤其在font-size较大或line-height设置异常时更明显
display 值选错导致 ::after 失效
display: inline 是最常踩的坑：伪元素默认是 inline，而 clear 属性对 inline 元素完全无效，它连“换行”都做不到，更别说下移到浮动下方了。
- 必须用
display: block或display: table -
display: table更稳妥：不继承父级font-size/line-height，不会意外引入垂直间距，IE8+ 全兼容 -
display: block在现代浏览器没问题，但在老版 Safari（clear 的行为有偏差，慎用于需兼容旧环境的项目 - 避免用
display: inline-block：它仍属行内上下文，clear不生效，且可能因 vertical-align 引发布局抖动
为什么加了 clear: both 还不撑高？
关键不在“清浮动”动作本身，而在于这个伪元素是否成为浮动之后最后一个流内占位节点。如果父容器设置了 overflow: hidden 或 overflow: auto，且伪元素因 height: 0 + visibility: hidden 被裁剪，它就无法实际占据空间，撑高失效。
- 检查父容器是否无意中加了
overflow: hidden—— 这会把height: 0的::after“吃掉” - 若用
visibility: hidden，必须确保父容器overflow是visible（默认值）或scroll - 更推荐不用
visibility: hidden，直接用content: ""+display: table+clear: both三件套，干净利落
现代布局下 ::after 清浮动还有必要吗？
基本没有。当父容器是 display: flex 或 display: grid 时，子元素设 float 已被规范定义为“无效果”，此时 ::after + clear 完全不触发，也不需要。
真正该警惕的是：还在用 float 做多栏布局的代码，往往意味着整体架构陈旧，::after 只是打补丁，不如直接重构为 Flex/Grid。
容易被忽略的一点：伪元素撑高依赖于文档流存在；一旦父容器变成绝对定位、固定定位，或设置了 transform，它的包含块可能变化，::after 的布局位置也会偏移——这时候撑高行为就不可靠了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
