开启Google Adsense移动广告优化功能时如何避免CLS（累积布局偏移）

可行的3种解决方案（均不需要关闭谷歌移动广告尺寸优化选项，不会影响广告收入） #

• 方案1：外层嵌套父容器（最推荐，纯CSS无副作用）

谷歌的广告JS只会修改你挂载AdSense代码的直接容器样式，不会触碰外层元素。你只需要给广告容器外面套一层自定义的父级div，给父级设置你需要的min-height即可避免布局塌陷，不会影响Web Vitals的CLS分数。
示例代码：

<!-- 自定义外层父容器，仅需修改此处的min-height值为你需要的高度 -->
<div style="min-height: 100px; width: 100%;">
  <!-- 原有AdSense广告代码无需修改 -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-你的发布商ID"
       data-ad-slot="你的广告位ID"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

该方案完全不干扰谷歌的广告优化逻辑，也不会影响广告填充率和收入，适配所有场景。

• 方案2：指定广告高度参数

直接在AdSense代码的ins标签上添加data-ad-height属性，填入你需要的最小高度，谷歌的优化算法会优先遵循该参数，不会随意将容器高度修改为0。
示例代码：

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-你的发布商ID"
     data-ad-slot="你的广告位ID"
     data-ad-format="auto"
     data-ad-height="100px" <!-- 新增这行，修改为你需要的高度 -->
     data-full-width-responsive="true"></ins>

• 方案3：用MutationObserver强制覆盖样式（适合需要精确控制广告容器本身属性的场景）

如果外层套容器不符合你的布局需求，可以用JS监听广告容器的样式变化，一旦检测到谷歌修改了min-height或height属性，立刻覆盖回你需要的值，优先级同样设为!important即可生效。
示例代码：

// 替换成你自己的广告容器选择器
const adContainer = document.querySelector('.adsbygoogle');
const observer = new MutationObserver(() => {
  // 100px替换为你需要的最小高度
  adContainer.style.setProperty('min-height', '100px', 'important');
});
// 监听广告容器的style属性变化
observer.observe(adContainer, { attributes: true, attributeFilter: ['style'] });

注意该代码需要放在AdSense的JS加载之前执行，才能保证监听到所有样式修改。

提问相关参考截图：

内容的提问来源于stack exchange，提问作者AGamePlayer