浮动广告条导致下方内容被遮挡是因浮动脱离文档流引发的布局塌陷；clear: both 仅对紧跟其后的正常流块级元素有效；overflow: hidden 虽可触发BFC但有裁剪、层叠等副作用；推荐用 display: flow-root、flex 或伪元素清除法。
浮动广告条导致下方内容上移被遮挡
这是典型的浮动元素脱离文档流引发的布局塌陷问题。广告条用 float: left 或 float: right 后，父容器高度无法自动包裹它，后续内容会“无视”它的物理占位，直接从顶部开始排列，看起来就像被盖住了。
为什么 clear: both 有时没用
clear: both 只对**紧跟在浮动元素之后的块级元素**生效，且该元素必须是**正常流中的块盒**。常见失效场景：
- 目标元素本身也设置了
float（比如广告条和下面的导航栏都 float，clear 就不起作用） - 目标元素是行内元素或设置了
display: inline - 用了
position: absolute/fixed，已脱离文档流 - clear 放在了浮动元素的父容器上，而不是它的兄弟元素上
正确做法是：在广告条后面、需要“下移”的那个元素上加 clear: both，例如：
.ad-banner { float: right; }
.content-below { clear: both; }
overflow: hidden 的副作用比你想象中大
给广告条的父容器设 overflow: hidden 确实能触发 BFC，让父容器包含浮动子元素，从而撑开高度——但这只是“看起来”修复了。实际风险包括：
立即学习“前端免费学习笔记（深入）”；
- 如果广告条内部有下拉菜单、tooltip、弹窗等需溢出显示的内容，会被直接裁剪
- 配合
transform或will-change时，可能触发非预期的层叠上下文，影响z-index行为 - 在旧版 Safari 中，
overflow: hidden可能导致 fixed 定位元素错位
它不是布局修复方案，而是“视觉掩盖手段”，慎用于生产环境。
更可靠的现代解法：BFC + 语义化容器
优先使用明确创建 BFC 的方式，既稳定又无副作用：
- 给广告条的父容器加
display: flow-root（推荐，专为此设计，无兼容性陷阱） - 或用
display: flex/display: grid替代浮动（广告条本身改用align-self或justify-self控制位置） - 若必须保留浮动，用伪元素清除法，避免污染 HTML 结构：
.ad-container::after { content: ""; display: table; clear: both; }
真正麻烦的从来不是清除浮动，而是把广告条塞进一个本不该浮动的上下文中——检查它是否真的需要脱离文档流，很多时候用 position: sticky 或弹性布局更干净。
