::before设置了position: absolute之后依然把父容器撑开，核心原因在于它并不一定完全脱离布局影响。它仍可能受到父容器display类型（例如flex、grid）以及overflow等属性的限制，特别是在没有指定top/left偏移时，浏览器很可能仍会把它纳入主轴尺寸计算范围。
为什么::before加position: absolute后还撑开父容器？
真正的问题通常不是绝对定位失效，而是::before并没有被彻底“移出文档流”的影响范围——它依旧会受到父元素display类型与overflow机制的约束，尤其在flex/grid布局环境下，更容易被浏览器判定为参与尺寸计算。
- 当父容器使用
display: flex或display: grid时，::before即便设置了position: absolute，如果没有写top/left等定位偏移，浏览器仍可能把它计入主轴尺寸，尤其在旧版 Safari 中更常见 - 父容器上的
overflow: hidden虽然会裁剪伪元素显示区域，但并不会阻止它影响父容器重排；如果伪元素还用了padding-top，而父容器又没有明确宽度，百分比计算就可能异常，进而造成高度塌陷 - 若项目中存在类似
*::before { display: inline; }的全局重置样式，它可能覆盖你原本设置的display: block，从而导致width和height声明失效
::before绝对定位后宽高不生效的常见检查点
伪元素宽高不生效，大多数情况下并不是CSS语法写错，而是基础渲染条件没有满足。
- 必须明确写上
content: ""，空字符串也可以；但如果是content: none或完全未声明，伪元素根本不会被创建 - 需要设置
display: block或display: inline-block；在display: inline状态下，width/height始终不会生效 - 如果和
position: absolute搭配使用，父容器必须设置position: relative，否则伪元素会相对body定位，造成定位和尺寸参考系混乱 - 不要同时混用
float与position: absolute，因为这两者本身互斥，绝对定位会直接忽略float
父容器width不确定时::before的padding-top为何算不准？
伪元素的百分比padding-top是基于包含块宽度来计算的。如果父容器宽度来自 flex 自动分配、width: auto，或者根本没有设置可解析的宽度与min-width，那么这个百分比就缺少稳定的计算基准。
- 在
flex: 1场景下，通常需要补充min-width: 0或width: 100%，这样百分比padding才有明确依据 - iOS 15.3 及更早版本的 Safari 对
::before百分比padding支持并不完整，实际开发中可改用padding-bottom作为兼容降级方案 - 如果父容器本身已经写死了
height（例如height: 200px），那么padding-top带来的撑高效果会被固定高度覆盖，最终高度会取设定值，而不是伪元素计算结果
和aspect-ratio混用时最易踩的坑
现在主流浏览器都支持aspect-ratio，但它和::before占位方案同时使用时，并不是“多一层更稳”，反而很容易产生布局冲突。
- 如果同一个容器既设置了
aspect-ratio: 16/9，又使用::before + padding-top来撑比例，高度往往会翻倍，因为伪元素占位与属性拉伸会同时生效 - 部分第三方 UI 库，比如 Bootstrap 的
.ratio类，内部本身就已经通过::before实现比例容器，如果再手动补一套，会出现重复撑高的问题 iframe这类替换元素本身不适合直接套用aspect-ratio方案，但如果外层容器已经设置了aspect-ratio，再叠加::before，往往会破坏原有的原生尺寸行为
归根结底，关键并不只是“怎么写伪元素CSS”，而是要先确认它是否已经成为布局链路里那个容易被忽略的变量。例如：父容器是否建立了定位上下文？宽度能否被正常解析？有没有被其他全局样式悄悄覆盖？只要这些条件中有一项遗漏，position: absolute看起来就可能像是没有真正生效。
