footer被浮动元素顶上去是因为父容器高度塌陷；应给footer加clear: both，或让父容器触发BFC（如overflow: hidden或display: flow-root）。
footer 被浮动元素顶上去，是因为父容器高度塌陷
浮动元素会脱离文档流，导致其父容器无法感知高度，如果 footer 前面的主内容区域用了 float（比如 float: left），而没做清除，父容器就可能“以为”里面是空的，于是 footer 会向上回流到浮动元素旁边——看起来就像卡在中间。
常见错误现象包括：
-
footer和上面的侧边栏/文章列表并排显示 - 页面底部留出大片空白，或
footer直接叠在内容上 - 使用开发者工具检查时发现
footer的top值异常小
推荐用 clear: both 清除浮动（最直接）
在 footer 元素上加 clear: both 是最快见效的方法，它强制该元素不与任何左右浮动元素同行：
footer {
clear: both;
}注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须加在
footer自身样式里，不能只加在前面的容器上 - 如果
footer是块级元素且没有设置float，clear: both就足够了 - 不要写成
clear: left或clear: right，除非你确定只有一侧浮动
更健壮的做法：给父容器触发 BFC（避免塌陷根源）
比起在每个浮动后加 clear，更好的方式是让包含浮动的父容器自己“撑开”。常用手段是触发 BFC（块级格式化上下文）：
.main-container {
overflow: hidden; /* 或 overflow: auto */
/* 也可用 display: flow-root（现代浏览器支持更好） */
}为什么选这个：
-
overflow: hidden兼容性好（IE6+），但要注意别真需要滚动时被截断 -
display: flow-root是专为此设计的，语义清晰、无副作用，Chrome 58+/Firefox 53+/Safari 15.4+ 支持 - 避免用
zoom: 1或*height: 1px这类 IE 专属 hack，现在基本没必要
别再用 clearfix 伪类了？其实要看场景
传统 clearfix（通过 ::after 插入清浮动内容）依然有效，适合需要复用、兼容老项目的情况：
.clearfix::after {
content: "";
display: table;
clear: both;
}使用时注意：
- 必须加在浮动元素的直接父容器上，不是
body或html - 如果父容器已有
overflow或display: flow-root，就不需要再加clearfix -
display: table在某些旧版 Safari 下有渲染 bug，用display: table-cell更稳，但多数情况table够用
浮动本身没过时，但滥用会导致布局不可控。真正容易被忽略的是：清除动作必须作用在“浮动影响所及的边界”上——不是随便找个地方加 clear 就行，得看它属于哪个包含块、是否被其他定位干扰。
