浮动元素脱离文档流致父容器高度塌陷为0，需用display: flow-root触发bfc解决，并配合aspect-ratio或padding-top预设图片占位，双管齐下防页面抖动。
浮动导致父容器高度塌陷，图片加载前没占位
根本不是图片慢，是浮动让父容器“算不出高度”。float元素脱离文档流，父容器高度直接塌成 0，图片加载前下方内容紧贴顶部；等图一到，容器突然撑开，整个页面往下猛推——这就是你看到的抖动。常见错误包括：clear: both只加在部分子元素上、伪元素没设display: table、或者父容器本身用了display: flex还硬套float，结果清除完全失效。
必须同时 fix 浮动塌陷 + 图片占位
只用overflow: hidden或display: flow-root解决塌陷，但没预设图片尺寸，照样抖；反过来，只写aspect-ratio却不管父容器是否 BFC 化，比例根本不起作用。实操要双线并进：
-
display: flow-root设在父容器上（比overflow: hidden更干净，不裁剪阴影/下拉菜单） - 删掉
<img>标签里的width和height像素属性（它们干扰响应式，且现代浏览器已不靠它推宽高比） - 给图片的**直接父容器**设
aspect-ratio: 16 / 9+width: 100%，图片自身只写width: 100%; height: auto; - 若需兼容 iOS 15.4 之前版本，fallback 用
padding-top: 56.25%+position: relative/absolute，别漏inset: 0
懒加载loading="lazy"和抖动的关系
它只控制“何时加载”，不管“加载前占多大地方”。如果你给浮动容器里的图片加了loading="lazy"却没预设宽高比，首屏可能正常，一滚动就闪——因为懒加载图片进入视口前高度仍是 0。正确顺序是：
- 先确保容器有稳定高度（
display: flow-root+aspect-ratio或padding-top） - 再加
loading="lazy"（首屏图坚决不加） - 关键图加，避免被浏览器降级延迟
构建工具路径解析失败会加剧抖动
Vite 等工具默认不解析srcset中的相对路径，上线后 404 会导致 fallback 到单张大图，反而加剧抖动——这点最容易被忽略。检查构建产物中图片 URL 是否正确，尤其带srcset的响应式图，确保路径被正确重写或使用绝对路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
