页脚不贴底？大概率是浮动没清干净
浮动元素脱离文档流，父容器高度塌陷，导致页脚上浮。这不是页脚本身的问题，而是它上面的浮动内容让整个布局“失去高度参照”。clear: both 必须加在页脚上，且它的父容器不能有高度限制（比如 height: 100%）干扰自然撑高。
-
float元素必须有明确的清除点，仅靠页脚自身clear: both不够——如果它前面的兄弟元素也浮动了，而它们的父容器没清除，高度依然为 0 - 常见错误：给
body或html设height: 100%，再用min-height: 100%做页脚触底，但浮动一加，min-height失效，因为父容器高度为 0 -
清除浮动推荐写法：
<div style="clear: both"></div>放在所有浮动元素之后、页脚之前；或直接在页脚标签上加style="clear: both"
为什么不用 position: fixed 直接压底部？
固定定位会让页脚永远卡在视口底部，内容少时遮挡正文，内容多时页脚悬浮在半空——它脱离文档流，不随内容滚动，也不参与高度计算。真要“触底”，就得依赖文档流自然延伸到底部，而不是视觉上“钉住”。
-
position: fixed的bottom: 0只认视口，不认页面总高度 - 移动端下，键盘弹出、地址栏收起都会触发视口高度变化，
fixed页脚会错位 - 无障碍访问中，
fixed元素可能被读屏器跳过，或打断阅读顺序
overflow: hidden 能清浮动，但别乱用
给浮动元素的父容器设 overflow: hidden（或 auto）确实能触发 BFC，让容器包含浮动子元素，从而恢复高度。但它不是万能解药，副作用明显。
- 内容溢出会被裁剪，比如下拉菜单、tooltip、绝对定位元素超出父容器时消失 在 IE6/7 中，
- 如果父容器本身需要滚动（如侧边栏），
overflow: hidden会把滚动条干掉 - 更稳妥的替代：用伪元素清除，例如
.clearfix::after { content: ""; display: table; clear: both; }
overflow: hidden 可能引发双倍边距 bug
现代项目里，其实该换思路了
浮动本就不是为整体布局设计的，CSS Grid 和 Flexbox 才是解决页脚触底的正解。用浮动硬凑，等于拿螺丝刀当锤子——能敲，但手疼，还容易崩刃。
立即学习“前端免费学习笔记（深入）”；
- Flex 方案只需三行：
html, body { height: 100% }+body { display: flex; flex-direction: column }+main { flex: 1 }，页脚自动沉底 - Grid 更简洁：
body { display: grid; grid-template-rows: auto 1fr auto }，分别放 header / main / footer - 老项目维护中若必须用浮动，请确保清除逻辑落在**浮动影响范围的最外层容器**，而不是凭感觉插一个
clear标签
浮动触底本质是补救措施，越往后拖，清除点就越难定位——哪一层漏了，整条链就断了。
