clear: both 不一定够用，需加在浮动区域后、页脚前的紧邻容器中；更推荐用 display: flow-root 或 overflow: hidden 触发 BFC 来解决高度塌陷。

页脚被浮动元素顶上去，clear: both 真的够用吗？

不一定。加了 clear: both 却没生效，大概率是它没加在正确的位置——不是加在页脚上，而是加在页脚前面那个**紧挨着浮动内容的容器**里。

常见错误是直接给

写 clear: both，但若页脚前有个空的

或父容器本身没参与 BFC，清除就失效。

• 正确做法：在浮动区域之后、页脚之前，插入一个「清除元素」，比如
• 更稳妥的做法：让页脚的父容器触发 BFC，例如加 overflow: hidden 或 display: flow-root
• display: flow-root 兼容性较好（Chrome 58+/Firefox 53+/Safari 10.1+），比 overflow: hidden 更安全，不会意外裁剪阴影或定位元素

为什么 clear: both 有时完全没反应？

根本原因是 CSS 清除只对「块级盒模型中的相邻浮动兄弟元素」起作用，一旦浮动脱离了文档流，又没被父容器包含，清除就失去参照对象。

• 浮动元素的父容器未设置 height 或未触发 BFC，导致高度塌陷，clear 找不到“底部”可对齐
• 页脚和浮动内容不在同一层 DOM 层级（比如页脚在另一个
  里，中间隔了闭合的块级容器）
• 使用了 Flex 或 Grid 布局后还硬套 clear——这些布局模式下浮动本身已被绕过，clear 失效是正常的

现代项目里该不该优先用 clear: both？

不推荐作为首选。它是为传统浮动布局设计的补救手段，而非常规布局逻辑。

• 如果页面主体还在用 float: left / float: right 排版，那 clear: both 是必要且有效的
• 如果已用 display: flex 或 display: grid 做整体布局，浮动应仅用于小范围图文环绕等场景，此时页脚上移问题通常源于局部浮动失控，应限制浮动作用域
• 用 display: flow-root 替代 clear 更语义清晰，也避免引入无意义的空标签

一个最小可验证的修复示例

假设 HTML 结构如下：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<main><aside style="float: left; width: 200px">侧边栏</aside><article>正文内容</article></main><footer>页脚</footer>

这时页脚会上移。修复方式不是改

，而是改

：

• 方案一（推荐）：
• 方案二（兼容老浏览器）：
• 方案三（传统）：在
  后加

真正容易被忽略的是：浮动影响的是**后续普通流元素的定位起点**，而不是某个具体标签的位置；所以修复点永远在浮动结束之后、受影响元素开始之前——这个“之间”，常常不是你直觉以为的那个位置。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！