布局抖动根源在于html结构缺陷：缺失width/height导致浏览器无法预知尺寸而重排，嵌套滚动容器使body宽度突变，float未闭合引发父容器塌陷，第三方脚本隐式修改dom均会触发cls。
布局抖动不是“样式没写好”，而是 HTML 结构本身在浏览器解析阶段就埋下的定时炸弹——它不靠 JS 触发，也不依赖 CSS 动画，只靠元素顺序、尺寸声明和容器行为就能让页面一加载就偏移。
为什么 <img> 没写 width 和 height 就会抖
浏览器解析 HTML 时，若 <img> 缺少 width 和 height 属性，就无法推算其固有宽高比（intrinsic aspect ratio）。结果是：初始渲染占位为 0×0 或默认行内尺寸，等图片加载完成才重排。下方文字/按钮全被顶下去，CLS 直接超标。
- 即使加了
max-width: 100%或aspect-ratio: 16/9，若 HTML 里没声明width/height，部分旧版 Safari 和 Chrome 在首帧仍可能 fallback 到无占位状态 -
aspect-ratio是 CSS 层面的补救，但 HTML 层面的width/height才是浏览器最早能拿到的确定性尺寸信号 - SVG 图片同理：必须带
viewBox，且最好也显式设width/height，否则某些场景下会按 300×150 默认渲染再缩放
<div> 嵌套顺序如何放大滚动条抖动
<p>当一个大块内容（比如文章正文）包裹在 <code><div class="wrapper"> 里，而这个 wrapper 又被另一个 <code><div class="page"> 包着，且后者设置了 <code>overflow: auto，那么只要内容高度跨过视口，滚动条就会在局部容器内出现——但它实际占用的是整个视口宽度。此时 body 的可用宽度依然突变，抖动照常发生。
- 真正起作用的只有
html 元素上的 overflow-y: scroll，body 或任意嵌套 <div> 加了都没用，反而可能造成双滚动条
<li>如果设计不允许常驻滚动条，结构上应避免「全局内容区 + 局部滚动容器」混用；更稳妥的做法是把可滚动区域严格限定在 <code>main 或 article 内，其余区域（如 header/footer）脱离文档流或用 position: sticky
- 微信小程序或 Vue 自定义滚动组件（如
el-scrollbar）内部用 overflow: hidden + JS 模拟滚动，但若里面塞了 position: fixed 元素，结构上就等于主动邀请抖动入场
浮动元素未闭合为何导致后续元素跳位
float 本身不会直接触发 layout thrashing，但它会让父容器高度塌陷，进而影响后续兄弟元素的定位基准。例如一个 <section></section> 里几个 <div class="card"> 左浮动，但没清浮，导致该 section 高度为 0；下一个 <code><footer></footer> 就会直接贴到页面顶部，等 JS 计算完真实高度再重排，视觉上就是“ footer 突然掉下来”。
- 现代布局应优先用
display: flex 或 display: grid 替代 float，它们天然不塌陷
- 若必须兼容老项目，清浮不要只靠
clear: both —— 它只作用于后续元素，不修复父容器自身高度；要用 ::after 伪元素或 overflow: hidden 强制 BFC
- 特别注意第三方库（比如某些轮播图组件）内部偷偷用
float 却没处理闭合，这种抖动很难从你自己的代码里发现
最隐蔽的抖动从来不在你写的那几行 HTML 里，而在你引入的组件、字体、广告脚本对 DOM 的悄悄修改——结构预防只是第一道防线，真要稳住，得配合 PerformanceObserver 监控 layout-shift 事件，才能揪出那些藏在 node_modules 里的抖动源。
html 元素上的 overflow-y: scroll，body 或任意嵌套 <div> 加了都没用，反而可能造成双滚动条
<li>如果设计不允许常驻滚动条，结构上应避免「全局内容区 + 局部滚动容器」混用；更稳妥的做法是把可滚动区域严格限定在 <code>main 或 article 内，其余区域（如 header/footer）脱离文档流或用 position: sticky
el-scrollbar）内部用 overflow: hidden + JS 模拟滚动，但若里面塞了 position: fixed 元素，结构上就等于主动邀请抖动入场浮动元素未闭合为何导致后续元素跳位
float 本身不会直接触发 layout thrashing，但它会让父容器高度塌陷，进而影响后续兄弟元素的定位基准。例如一个 <section></section> 里几个 <div class="card"> 左浮动，但没清浮，导致该 section 高度为 0；下一个 <code><footer></footer> 就会直接贴到页面顶部，等 JS 计算完真实高度再重排，视觉上就是“ footer 突然掉下来”。
- 现代布局应优先用
display: flex或display: grid替代float，它们天然不塌陷 - 若必须兼容老项目，清浮不要只靠
clear: both—— 它只作用于后续元素，不修复父容器自身高度；要用::after伪元素或overflow: hidden强制 BFC - 特别注意第三方库（比如某些轮播图组件）内部偷偷用
float却没处理闭合，这种抖动很难从你自己的代码里发现
最隐蔽的抖动从来不在你写的那几行 HTML 里，而在你引入的组件、字体、广告脚本对 DOM 的悄悄修改——结构预防只是第一道防线，真要稳住，得配合 PerformanceObserver 监控 layout-shift 事件，才能揪出那些藏在 node_modules 里的抖动源。
