伪元素撑不开父容器的根本原因是未参与高度计算：content: ""虽合法但不生成可测量盒，需content: " "或换行符；display必须设为block/table（推荐table），且父容器不能有height/max-height、overflow:hidden等压制样式。
伪元素设置了 content 却撑不开父容器，根本原因不是“没生效”，而是它压根没参与高度计算——浏览器只在特定条件下才让伪元素影响布局。
content 值合法但不触发布局参与
即使写了 content: ""，伪元素也只是一个空盒，不占据空间、不撑高父容器。它存在，但被浏览器当作「无尺寸装饰节点」处理。
-
content: ""合法，但不会生成任何可测量的盒；真正能撑开高度的最小可靠值是content: " "（一个空格）或content: "\a"（换行符） - 用
content: attr(data-xxx)时，若属性值为空字符串或属性不存在，结果等同于content: ""，同样不撑高 - Sass/Less 编译后若删掉了空
content声明（某些配置会这么做），就等于没写——务必在 DevTools 的 Elements 面板里确认伪元素节点是否真实出现在 DOM 树末尾
display 类型没设对，clear 或 height 都白搭
::after 默认是 display: inline，而 clear: both 和 height: 100% 对行内元素完全无效。它可能渲染了，但被忽略布局作用。
- 必须显式设为
display: block或display: table；后者更推荐，因它天然触发 BFC，且兼容 IE8+ - 若父容器是
display: inline（如span），伪元素根本不会渲染——得先给父容器加display: inline-block或block - 设了
position: absolute就别指望它撑高：绝对定位元素脱离文档流，父容器对其高度“视而不见”
父容器自身样式直接屏蔽了伪元素的高度贡献
就算伪元素正确生成、display 正确、内容非空，父容器几个常见样式仍会让它“存在却无效”。
-
overflow: hidden或overflow: auto可能裁剪伪元素，尤其当它靠height: 100%计算时——此时它只按父容器的height（而非滚动内容高度）伸展 - 父容器设了
height、max-height或min-height，会锁死高度计算逻辑；伪元素再努力也撑不开 - 父容器是
position: absolute或fixed，它已脱离文档流，内部浮动子项 + 伪元素清除都失去意义
现代项目里最该先问一句：你真需要清除浮动吗？
如果父容器已经是 display: flex 或 display: grid，浮动子元素自动退化为普通块级行为，.clearfix 不仅无效，还可能引入意外空白或 margin 折叠。
- 替代方案：
display: flow-root是专为此设计的原生属性，一行代码、零副作用、无需伪元素，Chrome 64+/Firefox 58+/Safari 15.4+ 全支持 - 但它只作用于当前父容器，嵌套浮动结构仍需逐层处理——这点容易被忽略，以为加一个就万事大吉
- 检查 computed 样式时，重点盯
display值和伪元素的height/min-height是否为 0，而不是只看 CSS 规则有没有写
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
