浮动元素脱离文档流导致父容器高度塌陷，使页脚误判位置而上移；clear:both需作用于文档流中位于浮动后的块级元素，现代推荐用display:flow-root或overflow:hidden清除塌陷。
浮动元素为什么会让页脚往上爬
因为浮动元素脱离文档流，父容器高度塌陷，后续的页脚就“看不见”上面还有内容，直接贴到页面顶部去。这不是页脚的问题，是它前面那个浮动容器没撑开高度导致的。
常见现象：footer 跑到主要内容左侧或中间，甚至被遮挡；检查 DOM 会发现它紧挨着 body 开始处，而非内容末尾。
clear:both 必须加在页脚上才有效吗
不一定。关键是让某个元素「避开所有前面的浮动」，所以加在页脚本身最直接，但也可以加在它的前一个兄弟元素上（比如主内容区末尾），只要它能触发 BFC 或清除浮动即可。
-
clear: both只对块级元素生效，div、footer、section这类默认块级标签可以直接用 - 如果页脚是
position: absolute或fixed，clear完全无效——它只影响文档流中的定位 - 现代写法更推荐用
overflow: hidden或display: flow-root给浮动容器自身清塌陷，而不是靠后面元素“补救”
clear:both 的替代方案和兼容性取舍
IE8+ 支持 clear: both 没问题，但如果你的浮动容器需要自适应高度（比如内部子项动态增减），单靠页脚加 clear 是治标不治本。
立即学习“前端免费学习笔记（深入）”；
更健壮的做法：
- 给浮动容器加
overflow: hidden（老项目常用，但可能意外裁剪box-shadow或position: absolute子元素） - 用
display: flow-root（Chrome 58+/Firefox 57+，语义清晰，无副作用，推荐新项目首选） - 伪元素清除法：
::after { content: ""; display: table; clear: both; }，兼容 IE8+，适合需要支持旧浏览器的场景
注意：clear: both 本身不解决父容器塌陷，它只是让当前元素“等浮动结束再开始”，所以必须确保它出现在浮动元素之后的文档流中。
为什么有时候加了 clear:both 还没用
最常见原因是：该元素没有参与文档流，或者它的父容器用了 position: absolute/fixed、display: flex/grid，此时 clear 被忽略。
- 检查计算样式，确认目标元素的
display是block（不是inline）且未被float自身影响 - 确认它确实位于浮动元素的后面——DOM 顺序错了，
clear就没意义 - 如果用 Flex 布局包裹了页脚，
clear完全无效，应改用margin-top: auto或调整flex-direction
真正难处理的，往往是浮动和定位、Flex、Grid 混用时的隐式冲突，这时候得先理清布局模型优先级，而不是堆 clear。
