浮动布局中footer上浮等问题根源在于clear未加在footer自身或未解决塌陷，正确做法是给footer设clear:both、用伪元素clearfix清除父容器浮动，或用overflow:hidden/display:flow-root触发bfc；页脚置底需靠flex/grid等现代布局实现。
浮动布局下 footer 上浮、被侧边栏盖住、底部留白——不是 clear 没用，而是它加错了位置，或根本没解决塌陷根源。
clear: both 必须加在 footer 自身上
很多人把 clear: both 写在浮动容器（比如 .main）的 CSS 里，结果完全无效。因为 clear 只对“自己”生效：它告诉浏览器“我这个元素，下方不能有浮动”，所以必须作用于 footer 这个元素本身。
- ✅ 正确：
.footer { clear: both; }或<footer style="clear: both"></footer> - ❌ 错误：
.main { clear: both; }—— 这个容器本身没参与布局流，清了也没用 - ⚠️ 若
footer是inline或inline-block，clear会失效 —— 它只对块级元素起作用，记得设display: block - ⚠️
clear: left或clear: right只清除单侧，若左右都有浮动（如两栏布局），必须用both
伪元素 clearfix 更可靠，但要加对容器
在浮动容器末尾硬插 <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 或 display: 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，需给包裹容器设
min-height: 100vh+display: flex+flex-direction: column，再给主内容区加flex-grow: 1（不是 footer） - 如果用绝对定位，
footer得设position: absolute; bottom: 0，且其父容器必须有position: relative和足够高度（如min-height: 100vh） - 浮动布局本身已过时，现代项目中若仍依赖 float 实现两栏，又想页脚置底，大概率是结构耦合太深 —— 最终修复点往往不在 footer 样式，而在放弃 float 改用 Flex/Grid
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
