clear: both 不一定够用，需加在浮动区域后、页脚前的紧邻容器中；更推荐用 display: flow-root 或 overflow: hidden 触发 BFC 来解决高度塌陷。
页脚被浮动元素顶上去，clear: both 真的够用吗？
不一定。加了 clear: both 却没生效，大概率是它没加在正确的位置——不是加在页脚上，而是加在页脚前面那个**紧挨着浮动内容的容器**里。
常见错误是直接给 <footer></footer> 写 clear: both，但若页脚前有个空的 <div> 或父容器本身没参与 BFC，清除就失效。
<ul>
<li>正确做法：在浮动区域之后、页脚之前，插入一个「清除元素」，比如 <code><div style="clear: both"></div>
overflow: hidden 或 display: flow-root
display: flow-root 兼容性较好（Chrome 58+/Firefox 53+/Safari 10.1+），比 overflow: hidden 更安全，不会意外裁剪阴影或定位元素为什么 clear: both 有时完全没反应？
根本原因是 CSS 清除只对「块级盒模型中的相邻浮动兄弟元素」起作用，一旦浮动脱离了文档流，又没被父容器包含，清除就失去参照对象。
- 浮动元素的父容器未设置
height或未触发 BFC，导致高度塌陷，clear找不到“底部”可对齐 - 页脚和浮动内容不在同一层 DOM 层级（比如页脚在另一个
<section></section>里，中间隔了闭合的块级容器） - 使用了 Flex 或 Grid 布局后还硬套
clear——这些布局模式下浮动本身已被绕过，clear失效是正常的
现代项目里该不该优先用 clear: both？
不推荐作为首选。它是为传统浮动布局设计的补救手段，而非常规布局逻辑。
立即学习“前端免费学习笔记（深入）”；
- 如果页面主体还在用
float: left/float: right排版，那clear: both是必要且有效的 - 如果已用
display: flex或display: grid做整体布局，浮动应仅用于小范围图文环绕等场景，此时页脚上移问题通常源于局部浮动失控，应限制浮动作用域 - 用
display: flow-root替代clear更语义清晰，也避免引入无意义的空标签
一个最小可验证的修复示例
假设 HTML 结构如下：
<main> <aside style="float: left; width: 200px">侧边栏</aside> <article>正文内容</article> </main> <footer>页脚</footer>
这时页脚会上移。修复方式不是改 <footer></footer>，而是改 <main></main>：
- 方案一（推荐）：
<main style="display: flow-root"></main> - 方案二（兼容老浏览器）：
<main style="overflow: hidden"></main> - 方案三（传统）：在
<article></article>后加<div style="clear: both"></div>
真正容易被忽略的是：浮动影响的是**后续普通流元素的定位起点**，而不是某个具体标签的位置；所以修复点永远在浮动结束之后、受影响元素开始之前——这个“之间”，常常不是你直觉以为的那个位置。
