footer被浮动元素顶开是因浮动导致父容器高度塌陷，使footer定位在塌缩后的底部下方；应通过clearfix、overflow或display:flow-root在浮动父容器上清除浮动。
为什么 footer 总是被浮动元素顶开，底下多出一大块空白？
因为浮动元素脱离文档流，父容器高度塌陷，footer 会“看不见”上面的浮动内容，直接贴在塌缩后的父容器底边下方——那块空白，其实是父容器没撑开留下的空档。
常见现象：footer 悬在页面中间、底部悬空、滚动条异常变长；检查元素会发现它前面的容器 height 几乎为 0 或远小于视觉预期。
- 别用
margin-top或position: relative硬拉footer，治标不治本，响应式下极易错位 - 别依赖父容器设固定
height，内容一变就崩 - 清除浮动必须作用于浮动元素的**直接父容器**，不是随便找个地方加
clear: both
clear: both 该加在谁身上？加在哪一行？
它必须加在浮动元素之后、且属于**同一父容器内**的某个块级元素上，目的是让这个元素“等浮动结束再开始”，从而撑开父容器。
典型错误：把 clear: both 加到 footer 自己身上——如果 footer 不和浮动元素同级（比如浮动在 .main 内，footer 在 .main 外），它根本清不了。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：在浮动元素的父容器末尾插入一个空
<div style="clear: both"></div> - 更干净的做法：给浮动元素的父容器设
overflow: hidden或overflow: auto（注意：这会触发 BFC，顺便清浮动） - 现代方案：父容器用
display: flow-root（兼容性较好，Chrome 64+/Firefox 62+/Edge 79+，无副作用）
Flexbox 和 Grid 能绕过这个问题吗？
能，而且是更彻底的解法——它们天然不依赖浮动布局，也就不存在“塌陷”问题。
但要注意迁移成本：如果你的结构里浮动是用于图文混排（比如文字环绕图片），直接套 Flex/Grid 可能破坏语义和可访问性；如果是用于整体布局（如三栏），那强烈建议重构成 display: flex 或 display: grid。
- Flex 方案示例：
.container { display: flex; flex-direction: column; }，然后footer设margin-top: auto可自动沉底 - Grid 方案示例：
.container { display: grid; grid-template-rows: 1fr auto; }，footer放第二行即可 - 二者都不受浮动影响，也不需要额外清浮动代码，但老版本 IE（
flex≤ IE10，grid≤ IE16 仅旧语法）需谨慎评估
为什么 ::after 伪元素清除法有时失效？
因为伪元素默认是 inline，而 clear 只对块级元素生效。很多人写了 .clearfix::after { content: ""; clear: both; } 却忘了设 display: block。
完整可靠的写法必须包含三要素：content、display: block、clear: both。漏掉任一，都可能在某些浏览器或嵌套场景下失效。
- 标准 clearfix 写法：
.clearfix::after { content: ""; display: block; clear: both; } - 别给伪元素设
height: 0或visibility: hidden，某些旧版 Safari 会忽略clear - 如果父容器有
zoom: 1（IE hack），要一起保留，否则 IE6/7 可能不触发 hasLayout
min-height 或 padding-bottom——这些样式会干扰清除效果，让 footer 看似清了，实则仍偏移。动手前先用开发者工具选中父容器，看 computed height 是多少。 
