清除浮动不能让页脚始终在底部，仅解决父容器高度塌陷；页脚置底需结合clear: both（加在footer上）、bfc触发（如display: flow-root）、min-height: 100vh与高度继承控制，或直接采用flex/grid布局。
清除浮动本身不能让页脚“始终在底部”，它只解决父容器高度塌陷；页脚置底需要额外的高度控制逻辑，否则即使清了浮动，页脚依然会飘在半空或被覆盖。
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 继承链不能断
清除浮动只是让父容器有正确高度，但页脚要“始终在视口底部”，还得靠高度继承和最小高度控制。常见现象是：清完浮动，页脚还是悬空 —— 根本原因是 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 容器不依赖父级高度继承） - ⚠️
box-sizing: border-box要配padding-bottom（如果用绝对定位方案），否则边框/内边距会导致高度计算偏差
现代项目优先用 Flex/Grid 替代浮动
浮动 + 清除是修补式思路，而 Flex/Grid 能从根本上规避塌陷问题。尤其当目标明确是“页脚置底”，Flex 是目前最简、最稳的方案。
- ✅ Flex 粘性页脚标准写法：
body { min-height: 100vh; display: flex; flex-direction: column; }+main { flex: 1; }+footer { } - ✅ Grid 方案：
body { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; } - ⚠️ 如果项目里同时存在浮动、Flex 和
clear，说明布局逻辑混杂 —— 浮动此时只是冗余负担，不是解法 - ⚠️ 伪元素
::after清除浮动（.clearfix）仍适用于维护旧代码，但新项目别再主动用浮动做整体布局
真正容易被忽略的是：清除浮动和页脚置底是两个独立问题，前者管容器高度是否塌陷，后者管内容区是否撑满视口。混在一起处理，要么页脚飘着，要么内容被截断。先确认你到底卡在哪一环，再选对应手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
