广告位应作为可折叠段落节点插入正文dom，禁用iframe硬塞；需动态计算段落位置、设display:block与明确高度、用intersectionobserver懒加载、约束响应式尺寸，并确保广告生命周期与dom同步。
广告位怎么嵌入正文 DOM 流程中
不能靠 <iframe></iframe> 硬塞在段落中间，否则会破坏流式布局、触发重排、被广告拦截器直接屏蔽。正确做法是把广告容器当作一个「可折叠的段落节点」插入到正文 <p></p> 或 <div class="content"> 的子节点序列里。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>用 JavaScript 动态计算正文段落数（例如每 3 个 <code><p></p> 插一个），避免服务端硬编码位置
data-ad-loaded 属性，防止重复加载display: block 且带明确高度（哪怕 placeholder 高度），否则 Safari 下可能塌陷float 或 position: absolute 脱离文档流，否则后续段落会向上挤用 IntersectionObserver 控制广告懒加载时机
用户没滚动到位置就请求广告，既浪费资源又拉低 LCP。必须等广告容器进入视口再触发 SDK 加载或请求广告素材。
常见错误现象：广告占位符一闪而过、控制台报 Failed to execute 'observe' on 'IntersectionObserver': The target element is not a descendant of the document——说明容器还没挂到 DOM 就调了 observe()。
实操建议：
- 先插入空容器（如
<div class="ad-slot" data-ad-id="feed-1"></div>），再用document.querySelector()拿到它，最后传给IntersectionObserver - 配置
threshold: 0.1（10% 可见即触发），比0.0更稳，避免快速滑动时错过回调 - 回调里立刻调用广告 SDK 的
renderAd()或发请求，别再套 setTimeout
响应式广告容器怎么避免换行错位
信息流广告宽高比不固定（320×50、1024×250、90%×300px 都可能），在移动端常因父容器宽度突变导致换行、文字折行、左右留白不均。
关键不是“适配”，而是“约束”。CSS 必须主动截断异常尺寸：
- 给广告容器加
max-width: 100%和height: auto，再用aspect-ratio: 4/1（支持现代浏览器）或伪元素 hack（旧版）锁定比例 - 禁止子 iframe 设置
width="100%" height="auto"——这是多数错位源头，应由外层容器控制尺寸 - 媒体查询中对
.ad-slot单独设margin: 1rem 0，别依赖正文段落的默认 margin - 若用 Google AdSense，必须确保
data-ad-format="fluid"且容器宽度 ≥ 300px，否则返回空白
为什么广告脚本不能放
因为信息流广告依赖正文 DOM 结构定位， 中执行会找不到目标容器，报错 Cannot read property 'appendChild' of null，或者静默失败。
更隐蔽的问题是：多个广告位共用一个全局 SDK（如 adsbygoogle.js），但只初始化一次，后续 window.adsbygoogle.push() 若在 DOM 就绪前调用，会被丢弃。
实操建议：
- 所有广告 JS（含第三方 script 标签）统一放在
前，紧贴结尾 - 用
DOMContentLoaded包裹初始化逻辑，而非load（等图片完才触发太晚） - 如果用模块化打包（如 Webpack），确保广告代码 chunk 是 async + defer，且有明确执行顺序依赖声明
