footer不贴底是因浮动导致父容器高度坍缩，应在其上设clear: both；overflow:hidden虽能触发BFC修复但易裁剪溢出内容；现代推荐用flex布局替代浮动。
footer 被浮动元素顶上去、不贴底怎么办
这是浮动布局中最典型的布局塌陷现象：父容器高度坍缩，footer 会向上“漂”进浮动区域，甚至和上面的内容重叠。根本原因不是 footer 自己出了问题，而是它前面的浮动元素（比如 float: left 的侧边栏或内容区）让其父容器无法正确计算高度。
clear: both 是最直接有效的修复方式
在 footer 元素上添加 clear: both，强制它“避开所有左右方向的浮动”，从而落到浮动元素下方。这是语义清晰、兼容性好、无需额外 HTML 的首选方案。
- 必须作用于
footer本身，或其直接父容器（如果该父容器是浮动的容器） - 不要写成
clear: left或clear: right，除非你确定只有一侧有浮动 - 若
footer已设position: absolute或fixed，clear无效——此时需先移除定位再处理
footer {
clear: both;
background: #333;
color: white;
padding: 1rem;
}为什么 overflow: hidden 有时也管用但不推荐
给浮动元素的父容器设置 overflow: hidden（或 auto），会触发 BFC（块级格式化上下文），从而包含内部浮动，让父容器恢复高度。这确实能让 footer 回到底部，但副作用明显：
- 内容溢出时会被意外裁剪（比如下拉菜单、tooltip、负 margin 元素）
- 在旧版 Safari 中
overflow: hidden可能导致 fixed 定位失效 - 语义不清：你本意是“清除浮动”，却用了“隐藏溢出”这个无关属性
现代项目应优先考虑 flex 或 grid 替代 float
浮动本就不是为整体页面布局设计的，只是历史妥协方案。如果你的项目支持 IE10+，display: flex 可彻底绕过清除浮动问题：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
<p>main {
flex: 1;
}</p><p>footer {
/<em> 不需要 clear，自然撑到底部 </em>/
}真正容易被忽略的是：很多团队还在用浮动写整页结构，却没意识到只要把外层容器改成 flex，所有 clear、overflow、::after 清除法都可删掉——而且更稳定、更易维护。
