浮动导致页脚塌陷是因为浮动元素脱离文档流，父容器高度为0；clear: both 失效因未作用于浮动直接父容器；推荐用 display: flow-root 创建BFC清除浮动，Flex/Grid布局下无需清除。
浮动元素为什么会让页脚塌陷
因为浮动元素脱离了普通文档流，父容器高度无法自动包含它们，导致后续的页脚元素“以为”上面没内容，直接贴到页面顶部位置。这不是页脚错了，是它前面那个包裹浮动的容器高度变成了 0。
clear: both 为什么经常失效
clear: both 只对紧跟在浮动元素后面的块级元素生效，但如果你把它加在页脚上，而中间还隔着一个没清除的父容器（比如 .main），那页脚就清了个寂寞——它清的是自己前面有没有浮动，不是替别人收尾。
- 错误写法：
.footer { clear: both; }（前提是.footer上方没有其他浮动，且父容器已撑开） - 正确思路：清除动作必须放在浮动元素的**直接父容器内部**，且要确保该容器能获得高度
- 常见陷阱：用
overflow: hidden强制 BFC，但会意外裁剪position: absolute子元素或阴影
推荐用 display: flow-root 清除浮动
display: flow-root 是现代标准解法，它让容器建立新的 BFC，既能包含浮动子元素，又不会像 overflow: hidden 那样附带裁剪副作用。
.container {
display: flow-root;
}
- 兼容性：Chrome 64+/Firefox 58+/Edge 79+，Safari 10.1+，IE 不支持（需另配
zoom: 1或伪元素） - 比
clearfix更轻量，无需额外 DOM 或 content 干扰 - 如果项目还需支持 IE，可降级为伪元素方案：
&::after { content: ""; display: table; clear: both; }
Flex/Grid 布局下根本不用清浮动
一旦父容器设了 display: flex 或 display: grid，子元素浮动会自动失效（规范规定浮动在 flex/grid 容器中不产生脱离文档流效果），自然不存在塌陷问题。
立即学习“前端免费学习笔记（深入）”；
- 这意味着：如果你正在写新项目，优先用
display: flex布局主区域，float只留给兼容老浏览器的极少数场景 - 注意：不要在 flex 容器里还写
float: left，它不会按你预期排列，反而可能引发对齐异常 - 页脚固定到底部？用
min-height: 100vh+ flex column 更可靠，比靠清除浮动稳妥得多
