clear: both 必须作用于块级元素且是浮动元素的直接兄弟，否则无效；更可靠方案是给浮动父容器设 display: flow-root 或用 ::after 伪元素清除。
clear: both 必须加在 footer 自身上，且它得是块级元素；否则页脚大概率会卡在浮动区域中间，甚至被侧边栏盖住——这不是 bug，是浮动脱离文档流后的必然行为。
为什么 footer 加了 clear: both 还上浮？
常见现象：写了 .footer { clear: both; }，但页脚没掉下来。根本原因不是规则没生效，而是它没起作用的条件不满足：
-
footer实际是inline或inline-block——clear只对块级元素有效，必须显式设display: block -
footer被包在另一个容器里（比如<div class="layout"><footer></footer></div>），而浮动发生在更内层（如.main里），clear找不到可参照的浮动兄弟元素 - 父容器（如
.main）设置了height、overflow: hidden或position: absolute，掩盖了塌陷，但没解决清除逻辑 - 第三方样式库（如 Admin 模板）用更高权重选择器覆盖了你的规则，比如
#app .footer { clear: none !important; }
更可靠的清除点：在浮动容器末尾用 ::after 伪元素
比起依赖 footer 的位置，直接让包裹浮动的父容器「自己撑开高度」更稳定。关键不是“清在哪”，而是“清给谁看”：
- 清除动作必须加在「直接包裹浮动子元素」的容器上，比如
.content或.main，而不是body或最外层.layout - 推荐写法：
.content::after { content: ""; display: table; clear: both; }——display: table兼容 IE6/7，避免 margin 双倍问题 - 别用
::before：IE8 及更早版本对它的清除支持不稳定，旧版 Safari 也可能干扰 flex 顺序 - 如果该容器已用
display: flex或grid，clear根本不会触发 —— 浮动此时已是冗余负担
display: flow-root 是现代项目的首选解法
它不靠“清除”，而是让父容器主动创建 BFC（块级格式化上下文），从源头包含所有浮动子项。没有副作用，也不依赖兄弟元素关系：
立即学习“前端免费学习笔记（深入）”；
- 一行声明：
.content { display: flow-root; }，即可让.content正确计算高度，后续footer自然落到它下方 - 兼容性已足够落地：Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+；仅需支持 IE11 时才退回到
overflow: hidden - 慎用
overflow: auto：移动端 Safari 中可能意外触发滚动条，尤其当内容高度临界时 -
overflow: hidden虽兼容最好（IE6+），但会裁剪position: absolute的下拉菜单、tooltip 等真实溢出内容
真正容易被忽略的是：clear: both 只解决“不跟浮动挤在一起”，而页脚是否贴底，取决于整个页面高度控制逻辑（比如是否用了 min-height: 100vh + Flex 布局）。这两个问题混在一起排查，常会绕远路。
