直接用::before无法撑开容器高度，因其默认display: inline且不参与文档流；须设display: block并避免position: absolute，确保伪元素在流内占位，否则无法触发父容器高度计算。
为什么直接用 ::before 无法撑开容器高度？
很多人试过给容器加 ::before 并设 padding-top: 56.25%（16:9），却发现父盒子没被撑开——因为伪元素默认是 display: inline，且脱离文档流的绝对定位不会影响父容器尺寸。关键不是“用了没用”，而是没触发「块级替换行为」或「流内占位」。
必须让 ::before 参与盒模型计算，最可靠的方式是：设为 display: block + 不设 position: absolute + 确保它在流内占据空间。
- 避免写
position: absolute，否则它完全脱离流，对父高零贡献 - 不要依赖
content: ""默认的inline行为，显式声明display: block - 若父容器有
overflow: hidden或flex布局，需额外验证是否裁剪或压缩了伪元素
用 padding-top + aspect-ratio 混合实现更健壮的自适应
CSS 原生 aspect-ratio 已在现代浏览器广泛支持（Chrome 88+、Firefox 89+、Safari 15.4+），但它对老版本 Safari（::before 的 padding 技法仍可兜底。两者可共存，浏览器自动降级。
推荐写法是：父容器设 aspect-ratio: 16 / 9，再用 ::before 做兼容层——这样既简洁，又不破坏语义结构。
立即学习“前端免费学习笔记（深入）”；
- 优先写
aspect-ratio: 16 / 9，现代浏览器直接生效 - 同时保留
::before写法，仅对不支持aspect-ratio的浏览器启用（可用@supports not (aspect-ratio: 1)包裹） - 注意：
aspect-ratio作用于「替换元素」或「块级元素」，若父容器是inline或flex item且未设宽高，可能失效
::before 中 padding-top 百分比到底参照谁？
这是最容易踩坑的一点：padding-top 和 padding-bottom 的百分比值，在所有 CSS 场景下都**只参照父容器的宽度**，而非高度。也就是说，padding-top: 56.25% 表示“父宽的 56.25%”，这正是实现宽高比的核心机制——用宽度推导出所需高度。
所以必须确保父容器有明确宽度（比如 width: 100%、max-width: 600px 或 flex 容器下的自然伸缩），否则百分比 padding 会按 0 计算，盒子塌陷。
- 若父容器宽度由内容撑开（如
display: inline-block无宽限制），padding-top: 56.25%会极小甚至为 0 - 在 Grid 或 Flex 子项中，需确认父项是否已获得有效宽度（例如设置
flex: 1或grid-column: span 2） - 移动端 viewport 缩放、zoom 变化时，该百分比仍基于当前渲染宽度，一般无需额外处理
完整可运行的兼容写法示例
以下代码在 Chrome/Firefox/Safari 14+ 均有效，老 Safari 用户也能 fallback 到 padding 技法：
.aspect-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 主力方案 */
}
.aspect-box::before {
content: "";
display: block;
padding-top: 56.25%; /* 9/16 = 0.5625 → 56.25% */
}
.aspect-box > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意：::before 占据了高度空间，所以真实内容要用 position: absolute 覆盖其上；如果内容需流式布局（比如文字环绕），就得换思路——这时 aspect-ratio 更合适，且不必依赖伪元素。
真正麻烦的从来不是怎么写，而是当父容器套了三层 flex 又加了 transform 时，::before 的宽度参照系会被悄悄改变——这种场景下，宁可加一层 wrapper 元素，也别硬调伪元素。
