浮动元素脱离文档流导致布局塌陷，应给受干扰的后续元素（如页脚）设clear: both；更优方案是父容器触发BFC（如display: flow-root）或直接采用Flex/Grid布局。
浮动元素会脱离文档流，导致后续的非浮动元素“上移”到浮动元素旁边，破坏预期布局。解决方法不是简单加 clear: both，而是要理解它在哪加、为什么加、有没有更现代的替代方案。
clear: both 应该加在谁身上？
clear 作用的对象是“自身”，不是前面的浮动元素。它表示：这个元素的上边界不能和前面的浮动元素重叠，必须下移到浮动元素下方。
- 如果希望某个盒子（比如页脚）不被上面的浮动内容顶上来，就给这个盒子本身设置
clear: both - 错误做法：给浮动元素自己加
clear—— 它本来就没被其他浮动影响，加了也没用 - 常见场景：导航栏左浮动 + 内容区右浮动后，页脚塌陷，此时给页脚加
clear: both
更推荐的现代写法：BFC 隔离浮动
比起零散地加 clear，让父容器主动“包含”浮动子元素，更干净可靠。触发 BFC（块级格式化上下文）即可：
- 给浮动元素的父容器加
overflow: hidden或overflow: auto - 或者用
display: flow-root（现代标准，语义清晰，推荐） - 也可以用
float: left/right或position: absolute/fixed，但通常不适用父容器场景
这样父容器就能正确计算高度，后续元素自然不会被浮动“穿透”。
立即学习“前端免费学习笔记（深入）”；
Flex 和 Grid 是彻底告别浮动的好选择
浮动本就不是为整体布局设计的，它是为文字环绕图片这类场景诞生的。现在做页面结构，优先考虑：
- 用
display: flex做行/列布局，子项默认不脱离文档流 - 用
display: grid做二维网格，完全无需浮动 - 这两者天然规避浮动带来的塌陷、清除等问题，代码更简洁，响应式也更直观
clear: both 没过时，但在新项目中它更多是兜底或兼容老代码的手段。真正解决问题，是从布局思路升级开始。
