清除浮动不能让页脚固定在底部，仅解决父容器塌陷；页脚置底需配合高度控制、clear: both（加在footer自身）、bfc触发（如display: flow-root）及min-height: 100vh与html, body { height: 100% }协同。
清除浮动本身不能让页脚“固定在底部”，它只解决父容器高度塌陷；页脚要始终在内容下方且不悬空，必须配合高度控制逻辑，否则 clear: both 加了也白加。
clear: both 必须加在 footer 自身上
很多人把 clear: both 写在浮动容器（比如 .main）的 CSS 里，结果页脚还是飘在半空——因为 clear 是作用于当前元素的布局行为：它告诉浏览器“我这个元素下方不能有浮动”，所以必须直接设在 footer 上。
- ✅ 正确：
.footer { clear: both; display: block; } - ❌ 错误：
.main { clear: both; }—— 这个容器没参与后续流式布局，清了也没用 - ⚠️ 如果
footer是inline或inline-block，clear会失效，务必确认它是块级元素 - ⚠️ 若左右都有浮动（如两栏布局），
clear: left或clear: right不够，必须用both
用 display: flow-root 触发 BFC 更可靠
与其在每个浮动后补 clear，不如让包裹浮动的父容器自己“感知”子元素高度。触发 BFC（块级格式化上下文）就能自动包含浮动子元素，从源头避免塌陷。
- ✅ 推荐：
.wrapper { display: flow-root; }—— 专为该场景设计，无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 均支持 - ✅ 兼容 fallback：
.wrapper { overflow: hidden; }—— IE6+ 都行，但会截断真实溢出内容 - ❌ 避免：
overflow: auto—— 在某些 Safari 版本中可能意外出现滚动条 - ⚠️ 注意：该样式必须加在直接包裹浮动子元素的容器上，比如
<div class="wrapper"></div>，不是body或最外层 layout
min-height: 100vh 要配对 html, body { height: 100% }
清除浮动只是让父容器有正确高度，但页脚要“始终在视口底部”，还得靠高度继承链和最小高度控制。常见现象是：清完浮动，页脚还是悬空——根本原因是 min-height: 100vh 没生效。
- ✅ 必须写：
html, body { height: 100%; margin: 0; }—— 否则子元素的百分比高度或vh会失效 - ✅ 外层容器（如
.page或body）设min-height: 100vh，不是height: 100vh（否则内容超长时页脚被截断） - ⚠️ 如果用了 Flex 布局，
min-height: 100vh加在body上即可，无需再设html { height: 100% }（Flex 容器不依赖父级高度继承） - ⚠️ 移动端 Safari 对
vh有兼容问题（地址栏缩放影响），可临时用100dvh替代（支持较新）
别混淆“清除浮动”和“页脚置底”两个问题
很多项目还在用浮动 + 清除的方式硬凑粘性页脚，但真正容易被忽略的是：浮动本身已不是现代布局的首选解法。如果你的项目允许重构，display: flex 配合 flex-direction: column 和 margin-top: auto 或 flex: 1 才是更稳定、更少陷阱的路径。
而如果必须维护旧浮动结构，记住：清除浮动只是第一步，后续的高度继承、BFC 触发、vh 生效条件缺一不可——漏掉任意一个，页脚就大概率会错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
