根本原因是浮动广告脱离文档流而正文仍按普通流渲染，导致视觉重叠；解决方法是给广告父容器设display: flow-root创建bfc，ie11需降级为伪元素清除浮动，右栏应改用position: sticky替代float。
浮动广告栏遮挡正文的根本原因
不是广告栏“飘”了，是它脱离文档流后，正文内容仍按普通流从容器顶部开始渲染——两者在视觉上重叠，但实际不在同一布局层。这种错位在滚动时尤其明显，因为float本身不响应滚动位置变化，而正文是正常流动的。
常见现象包括：广告栏盖住文章第一段、页脚被顶到广告下方、响应式缩放后右侧留白或文字挤进广告区。
用 display: flow-root 包裹广告父容器
这是最直接有效的解法，它让父容器创建 BFC（块级格式化上下文），既能包含浮动广告栏的高度，又不裁剪溢出内容（比如 tooltip、下拉菜单、阴影）。
-
.ad-wrapper { display: flow-root; }—— 一行声明，无副作用 - 必须作用于广告栏的**直接父容器**，而不是整个页面容器
- IE11 及更旧版本不支持，需降级为
.ad-wrapper::after { content: ""; display: table; clear: both; } - 若父容器已是
display: flex或display: grid，则float已失效，此方案无意义
右侧广告栏别再用 float: right
浮动右栏会脱离流，导致中间出现不可控空白，且与主内容无法对齐。现代场景下应改用position: sticky替代。
- 必须设置
top值（如top: 20px），否则不触发粘性行为 - 父容器不能有
overflow: hidden或overflow: clip，否则截断粘性效果 - 检查父容器高度：若高度不足（比如仅
100px），sticky元素可能全程不“粘” - IE11 需手动降级：监听
scroll事件 +getBoundingClientRect()判断位置，再切position: fixed
正文内容区域要主动避让浮动广告
即使广告父容器清除了塌陷，正文若没形成独立 BFC，仍可能被浮动元素影响排版（尤其是段落文字自动绕排）。
- 给正文容器加
overflow: hidden或display: flow-root，强制其内部不响应外部浮动 - 避免只靠
margin-left硬留空：广告宽度一变就得同步改，小屏下易错位 - 如果正文里含
position: absolute子元素（如弹窗、工具提示），overflow: hidden会裁剪它们，此时只能退回到margin-left方案，并配合box-sizing: border-box预留容错空间
最容易被忽略的是：BFC 触发是单层的。给广告父容器加了display: flow-root，不代表正文容器也自动获得隔离——两者得各自处理，不能指望一个声明管全局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
