aspect-ratio单独失效是因为浮动导致父容器高度塌陷为0，失去计算基准；必须先用display: flow-root等创建bfc使父容器包裹浮动子项，再在其上设置aspect-ratio并清除img的width/height属性。
直接给图片容器设 aspect-ratio 不起作用，是因为浮动让父容器压根“算不出高度”——图片加载前容器高为 0，加载后突然撑开，布局就闪。必须先让父容器能感知浮动子项，再预留图片占位空间。
为什么 aspect-ratio 单独用会失效
浮动元素脱离文档流，父容器高度塌陷为 0，此时 aspect-ratio: 16 / 9 的计算失去基准：没有宽度参考，也没有渲染上下文。浏览器不会为一个高度为 0 的容器推算比例占位。常见错误是只加了 aspect-ratio，却忘了父容器还在塌陷。
- 父容器没触发 BFC（比如没写
display: flow-root），aspect-ratio就是摆设 -
<img>标签里写了width和height像素值，会干扰现代浏览器对宽高比的自动推断 - 图片用了
loading="lazy"，但容器没预设高度，进入视口瞬间从 0 高跳到实际高，闪得更明显
必须同步做两件事：BFC + 占位
修复顺序不能错：先让父容器“看见”浮动项，再让它“知道图片该占多大地方”。缺一不可。
- 给父容器加
display: flow-root（推荐）或overflow: hidden，强制创建 BFC，确保它包裹所有浮动子项 - 删掉
<img>上的width和height属性（它们已过时，且和aspect-ratio冲突） - 给图片的直接父容器（不是
<img>自身）设aspect-ratio: 16 / 9和width: 100%；<img>只写width: 100%、height: auto、object-fit: cover
兼容 iOS 15.4 之前版本的 fallback 写法
如果项目还需支持旧版 Safari，aspect-ratio 不可用，得用 padding-top 模拟比例。但这里极易出错：
- 父容器必须有明确宽度（比如
width: 100%），否则padding-top: 56.25%算出来是 0 - 图片容器要设
position: relative，<img>设position: absolute; inset: 0，否则 padding 会把图片顶下去，而不是撑出空白区 - 漏掉
inset: 0或写成top: 0; left: 0; right: 0; bottom: 0效果一样，但更啰嗦
懒加载和关键图的加载优先级
loading="lazy" 本身不导致闪烁，但它放大了未预设占位的问题。首屏图片绝不能懒加载；非首屏图在加 loading="lazy" 前，必须确保其容器已有稳定高度。
- 首屏图片去掉
loading="lazy"，改用fetchpriority="high"提升加载权重 - 构建工具（如 Vite）若未正确解析
srcset中的相对路径，上线后 fallback 到单张大图，会进一步加剧加载延迟和跳变——这点常被忽略 - 服务端渲染（SSR）场景下，图片尺寸需在 HTML 中静态注入，避免客户端 JS 补全占位造成二次重排
最易被忽略的是响应式断点切换时的清除逻辑：PC 上用了 display: flow-root，但在平板断点里被媒体查询覆盖成 display: block，塌陷立刻重现。浮动不是布局工具，是文本环绕工具——把它当栅格用，每个图片、每行文字、每个背景图都在等你补坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
