一、浮动广告适合什么场景

浮动广告适合页面主体内容较长、用户会持续滚动，并且广告展示不会妨碍核心操作的场景。例如，资讯或内容页面底部的小型推广卡片、商品介绍页的非关键优惠入口。它的主要特点是持续可见，而不是更高的点击率；是否使用，应结合用户体验、广告平台政策和业务要求判断。

以下情况通常不适合直接使用底部浮动广告：

• 页面底部有固定的结算、提交、播放或导航控件，广告会与其争夺同一块区域。
• 主要任务依赖屏幕底部操作，例如聊天输入框、表单提交区或游戏控制区域。
• 用户正在输入内容，软键盘出现后可用视口高度明显缩小。
• 广告素材尺寸不确定，且页面无法为它预留空间或提供关闭方式。

如果广告会与重要功能冲突，应优先考虑改成页面内广告位，或在特定页面、特定交互状态下不展示，而不是简单叠加更高的 z-index。

二、实现时需要守住的边界

1. 固定定位不等于自动避让内容

position: fixed 会让元素脱离普通文档流。页面正文不会因为底部多了一个广告而自动向上挪动。因此，页面末尾的文字、链接或按钮可能被广告盖住。可靠的做法是根据广告实际高度为内容增加底部留白，并在广告关闭或尺寸变化时同步更新。

2. 考虑安全区，但不要假设所有设备都相同

部分设备的屏幕边缘包含系统手势区域。CSS 环境变量 env(safe-area-inset-bottom) 可用于读取底部安全区；它的具体值由浏览器和设备决定，可能为零。网页不能从这个变量推断广告平台对广告尺寸、展示频率或关闭行为的要求。

示例使用 viewport-fit=cover 配合安全区内边距。该设置允许页面布局覆盖到屏幕安全区范围，页面自身需要负责避让系统区域；如果项目不需要覆盖到屏幕边缘，可不使用它，并根据实际设备验证布局。

3. 广告尺寸和平台规则以实际接入规范为准

示例使用自定义占位卡片，宽度随屏幕缩放，高度由内容决定。真实广告可能由 SDK 或广告 iframe 控制尺寸、关闭按钮、刷新策略和展示要求。不要仅凭本示例推断某个平台允许改变素材尺寸、覆盖原生关闭控件或使用固定底栏。接入前应查阅对应平台的最新文档、政策和审核要求。

4. 安全与隐私不是 CSS 能解决的问题

本示例不加载第三方脚本、不收集数据，也不实现定向投放。真实广告接入是否需要征得同意、披露数据用途或提供隐私选项，取决于所用服务、数据处理方式和适用法律法规。不能把广告代码本身描述成安全审计或合规方案；应按业务实际检查第三方脚本来源、权限、数据传输和隐私告知。

三、可运行示例：安全区、动态留白与关闭按钮

将下面代码保存为 floating-ad.html，用浏览器打开即可查看效果。它使用一个固定底栏、一个普通页面区域，以及一段小型脚本：脚本读取广告实际高度，将其写入页面底部留白；当广告尺寸变化或用户关闭广告时，留白也会更新。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>移动端浮动广告示例</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
      color: #202124;
      line-height: 1.6;
    }

    main {
      --floating-ad-space: 0px;
      max-width: 48rem;
      margin: 0 auto;
      padding: 1rem 1rem calc(var(--floating-ad-space) + 1rem);
    }

    .demo-section {
      min-height: 110vh;
      padding: 1rem 0;
      border-bottom: 1px solid #ddd;
    }

    .ad-banner {
      position: fixed;
      z-index: 1000;
      right: 0;
      bottom: 0;
      left: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 0.75rem;
      align-items: center;
      padding: 0.75rem 1rem
        calc(0.75rem + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid #d8d8d8;
      background: #fff;
      box-shadow: 0 -3px 14px rgb(0 0 0 / 12%);
    }

    .ad-banner[hidden] {
      display: none;
    }

    .ad-copy {
      min-width: 0;
    }

    .ad-label {
      display: inline-block;
      margin-bottom: 0.2rem;
      color: #555;
      font-size: 0.75rem;
    }

    .ad-link {
      display: block;
      overflow-wrap: anywhere;
      color: #1457a6;
      font-weight: 650;
      text-decoration: underline;
    }

    .ad-description {
      margin: 0.15rem 0 0;
      color: #444;
      font-size: 0.875rem;
    }

    .ad-close {
      min-width: 44px;
      min-height: 44px;
      padding: 0.4rem;
      border: 1px solid #777;
      border-radius: 0.4rem;
      background: #fff;
      color: #222;
      font: inherit;
      cursor: pointer;
    }

    .ad-close:focus-visible,
    .ad-link:focus-visible {
      outline: 3px solid #1769aa;
      outline-offset: 3px;
    }

    @media (min-width: 700px) {
      .ad-banner {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        max-width: 48rem;
        margin-inline: auto;
        border: 1px solid #d8d8d8;
        border-radius: 0.75rem;
        padding-bottom: 0.75rem;
      }

      main {
        padding-bottom: calc(var(--floating-ad-space) + 2rem);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body>
  <main id="page-content">
    <h1>示例页面</h1>
    <p>向下滚动，查看底部广告如何与页面内容共同工作。</p>

    <section class="demo-section">
      <h2>正文区域一</h2>
      <p>这里放置页面正文。页面最后一段内容也应能完整滚动到广告上方。</p>
    </section>

    <section class="demo-section">
      <h2>正文区域二</h2>
      <p>在真实页面中，应使用实际内容和真实广告素材测试布局。</p>
    </section>

    <p>页面末尾：此处的文字不应被浮动广告挡住。</p>
  </main>

  <aside class="ad-banner"
         id="floating-ad"
         aria-label="广告"
         aria-describedby="ad-description">
    <div class="ad-copy">
      <span class="ad-label">广告</span>
      <a class="ad-link"
         href="https://example.com/"
         target="_blank"
         rel="sponsored noopener noreferrer">
        示例推广内容
      </a>
      <p class="ad-description" id="ad-description">
        这是用于演示布局的占位文案，请替换为经过审核的素材。
      </p>
    </div>
    <button class="ad-close"
            id="close-ad"
            type="button"
            aria-label="关闭广告">
      关闭
    </button>
  </aside>

  <script>
    (() => {
      const page = document.getElementById("page-content");
      const ad = document.getElementById("floating-ad");
      const closeButton = document.getElementById("close-ad");

      if (!page || !ad || !closeButton) return;

      let frameId = 0;

      function updateReservedSpace() {
        cancelAnimationFrame(frameId);
        frameId = requestAnimationFrame(() => {
          const height = ad.hidden ? 0 : ad.getBoundingClientRect().height;
          page.style.setProperty("--floating-ad-space", `${height}px`);
        });
      }

      closeButton.addEventListener("click", () => {
        ad.hidden = true;
        updateReservedSpace();
      });

      if ("ResizeObserver" in window) {
        const observer = new ResizeObserver(updateReservedSpace);
        observer.observe(ad);
      } else {
        window.addEventListener("resize", updateReservedSpace);
      }

      updateReservedSpace();
    })();
  </script>
</body>
</html>

保存后可调整浏览器窗口宽度、滚动至页面底部，再点击“关闭”验证效果。这个示例有意使用简化的占位广告：链接指向保留用途的 example.com，并设置了 rel="sponsored noopener noreferrer"。发布时应替换成业务实际使用、已获授权且符合广告平台要求的内容和链接。

四、代码的关键处理

动态计算广告占用高度

脚本通过 getBoundingClientRect().height 获取广告当前高度，并将结果写入 main 的 CSS 自定义属性 --floating-ad-space。主内容区域用这个值增加底部内边距，避免用户滚到页面末尾时，最后一段内容仍被固定广告挡住。

高度来自实际渲染结果，而不是写死一个像素值，因此广告文案换行、用户调整字体大小或屏幕宽度变化时，留白可以随之更新。ResizeObserver 负责观察广告尺寸变化；不支持它的浏览器使用窗口尺寸变化事件作为基础回退。requestAnimationFrame 将更新安排到浏览器下一次绘制前，合并连续触发的测量。

示例在关闭广告时将 hidden 设为真，并重新测量。CSS 对 .ad-banner[hidden] 显式设置 display: none，确保固定定位规则不会覆盖隐藏状态。关闭后广告不再占据固定位置，页面预留空间也归零。

安全区内边距与桌面布局

底栏的下内边距由常规间距和 env(safe-area-inset-bottom, 0px) 组成。第二个参数是 CSS 环境变量不可用时的回退值。广告盒子的高度测量包含这部分内边距，因此内容留白与底栏占位保持一致。

在较宽屏幕上，示例把底栏限制在一定宽度并居中，同时取消安全区底部内边距。这只是演示布局的一种选择，断点数值不是设备适配标准。实际项目应结合设计稿、网页容器宽度及广告素材规格测试，不应把某个断点视为通用参数。

语义、键盘与可触达性

广告区域使用 <aside> 和可访问名称；链接文本描述推广内容，关闭操作使用原生 <button>。关闭按钮的可触区域设置为至少 44×44 CSS 像素，这有助于触屏操作，但不是对任何平台审核尺寸要求的替代。焦点样式让键盘用户可以识别当前操作位置。

可访问名称或标签不能代替广告披露，示例仍在卡片上显示“广告”。真实素材应清晰区分广告与页面正文，不要把广告伪装成系统提示、网站导航或普通内容按钮。

五、软键盘和动态视口怎么处理

当用户聚焦输入框时，移动浏览器可能弹出软键盘，压缩可见视口。不同浏览器对固定定位元素与键盘的处理并不完全相同；页面底部广告可能留在键盘上方，也可能与输入控件争夺空间。对于登录、搜索、评论、结算等需要输入的页面，常见且稳妥的产品策略是输入期间隐藏广告。

是否隐藏、何时恢复、是否保留已取得的广告素材，属于产品和广告平台集成策略，不存在一个适用于所有 SDK 的通用写法。若要增加输入状态判断，应针对具体页面的表单控件及设备浏览器验证，特别留意输入框失焦后页面滚动位置、软键盘收起时的布局变化。也可以通过 window.visualViewport 观察可视视口，但该接口并不自动解决所有浏览器的键盘行为，必须做好兼容性测试和回退。

六、常见错误及修正方法

1. 只固定广告，不给正文留白。
   页面初始看起来正常，滚到底部才发现末尾内容被遮住。应根据广告的实际高度设置内容底部空间，并在广告尺寸改变、隐藏或移除时同步更新。
2. 把广告高度写死。
   固定的 padding-bottom: 80px 可能与真实素材高度不符。文案换行、字体缩放、屏幕旋转都会改变高度。若广告平台规定了固定素材尺寸，应按其规范使用；否则应测量真实渲染尺寸。
3. 忽略安全区，或误把安全区当成广告留白。
   底栏内容可能贴近系统手势区域。安全区内边距解决的是底栏内部内容与屏幕边缘的距离问题；页面正文的底部预留则是另一个问题，两者都要处理。
4. 滥用高层级覆盖页面控件。
   提高 z-index 只能改变叠放次序，不能让内容可见或可操作。不要让广告压住购买、提交、导航或同意操作，也不要仅靠视觉覆盖关系处理页面冲突。
5. 关闭按钮太小、不可聚焦或没有名称。
   触屏用户难以点击，键盘或辅助技术用户也可能无法关闭。使用原生按钮，提供明确名称和可见焦点状态，并避免让按钮被素材本身盖住。
6. 内容变化后不重新测量。
   广告文案异步加载、字体加载完成或屏幕旋转后，高度可能变化。示例用 ResizeObserver 观察尺寸；接入真实 SDK 后仍要确认广告容器的实际变化能被观察到。
7. 在布局容器上制造固定定位陷阱。
   如果祖先元素使用某些会建立包含块的 CSS 属性，例如特定场景下的 transform，固定元素的定位参照可能不同于预期。若底栏没有相对视口定位，应检查祖先样式及渲染层级，并在真实浏览器中验证。
8. 让广告链接或素材误导用户。
   不要使用虚假的关闭按钮、诱导性点击文案，或把广告链接伪装成关闭操作。链接目标应与展示内容一致；如果打开新窗口，要明确考虑浏览器行为和用户预期。

七、上线前的检查清单

• 在窄屏、宽屏、横屏和不同文字缩放设置下检查广告是否换行、溢出或遮住正文。
• 滚动到文档最末端，确认最后一段、链接和可操作控件都能完整显示。
• 测试安全区设备以及不支持相关 CSS 环境变量的回退表现。
• 检查关闭按钮能否通过触屏、键盘和辅助技术操作；关闭后留白是否消失。
• 在输入框聚焦、软键盘展开和收起时检查广告与输入控件是否冲突。
• 接入真实 SDK 前，核对其广告尺寸、关闭行为、展示规则、隐私要求和审核政策；示例代码不替代这些规范。

浮动广告的实现重点不是让它始终盖在页面上，而是让它在合适的页面和状态中出现，并且让页面内容仍可读、可操作、可关闭。先确定展示策略和素材约束，再处理安全区与动态留白，通常比不断调高层级或叠加固定像素值更可靠。