清除浮动需在footer自身加clear: both；伪元素clearfix更优；overflow:hidden或display:flow-root可触发BFC自动包含浮动；粘性页脚需Flex布局配合min-height:100vh。
footer 跑到内容中间、底部留白、甚至被侧边栏盖住——不是 clear: both 没用，而是它加错了位置、或根本没解决塌陷根源。
clear: both 必须加在 footer 自身上，而不是父容器里
很多人把 clear: both 写在浮动容器（比如 .main）的 CSS 里，结果完全无效。因为 clear 只对“自己”生效：它告诉浏览器“我这个元素，下方不能有浮动”，所以必须作用于 footer 这个元素本身。
- ✅ 正确：
.footer { clear: both; }或<footer style="clear: both"> - ❌ 错误：
.main { clear: both; }—— 这个容器本身没参与布局流，清了也没用 - ⚠️ 注意：
clear: left或clear: right只清除单侧，若左右都有浮动（如两栏布局），必须用both - ⚠️ 若
footer是inline或inline-block，clear会失效 —— 它只对块级元素起作用，记得设display: block
用伪元素 clearfix 替代空 div，避免污染 HTML
在浮动容器末尾硬插 <div style="clear: both"></div> 能工作，但结构不干净，还可能被误删或样式干扰。更可靠的是用 ::after 在父容器内部生成清除节点。
- ✅ 推荐写法：
.wrapper::after { content: ""; display: table; clear: both; } - ⚠️ 不要用
::before—— 某些旧版浏览器（IE8 及更早）对它的清除支持不稳定 - ⚠️
display: table比display: block更稳妥：避免 IE6/7 下 margin 双倍问题，也兼容 BFC 触发 - ? 使用前提：该类必须加在**直接包裹浮动子元素的容器**上，比如
<div class="wrapper clearfix">...</div>，不是 body 或最外层 layout
overflow: hidden / flow-root 是更现代的“一劳永逸”方案
与其在每个浮动后补清除，不如让父容器自己“感知”浮动高度。触发 BFC（块级格式化上下文）就能自动包含浮动子元素，从源头避免塌陷。
立即学习“前端免费学习笔记（深入）”；
- ✅
.wrapper { overflow: hidden; }—— 兼容性最好（IE6+），但会截断真实溢出内容 - ✅
.wrapper { display: flow-root; }—— 现代标准写法，无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 均支持 - ❌
overflow: auto虽然也能触发 BFC，但可能意外出现滚动条（尤其在移动端 Safari 中） - ⚠️ 如果项目已用 Flex/Grid 布局，还强行套浮动 + 清除，说明结构逻辑混杂 —— 浮动此时只是冗余负担，不是解法
页脚“置底”不等于“清除浮动”，别混淆两个问题
清除浮动只解决父容器高度塌陷，让 footer 不被顶上去；但它不会让 footer 永远贴在视口底部。要实现“粘性页脚”，需要额外的高度控制逻辑。
- ✅ Flex 方案（推荐）：
body { display: flex; flex-direction: column; min-height: 100vh; }+main { flex: 1; }——footer自然沉底，且不依赖浮动 - ⚠️ 若仍用浮动布局，
min-height: 100vh必须配合html, body { height: 100%; }，否则高度继承链断裂，flex 或百分比计算都会失效 - ⚠️ 移动端 Safari 对
vh有地址栏缩放 bug，可临时换用100dvh（2023 年后新标准，当前主流浏览器已支持） - ❌ 避免用
margin-top: -60px把footer拉上去 —— 内容变长时它会被顶飞，这是浮动脱离文档流 + 外边距折叠失效的典型表现
真正容易被忽略的，是判断“这里是否真的需要浮动”。现代布局中，浮动仅适用于图文环绕等少数场景；一旦用于整体结构，清除动作就永远在打补丁，而不是解决问题。
