Flex布局天然不塌陷，因子项不脱离文档流，父容器能正确包裹高度；而浮动导致高度塌陷需用clear、overflow或伪元素补救，但Flex中clear失效，且必须重置float: none并注意IE兼容性。
Flex布局天然不塌陷，根本不用清除
浮动元素脱离文档流，父容器无法感知子项高度，导致背景、边框、下边内容上移——这就是“高度塌陷”。你必须加 clear: both、overflow: hidden 或伪元素 ::after 来强行补救。而 display: flex 容器默认触发 BFC（块级格式化上下文），子项无论是否伸缩、换行、溢出，父容器都能正确包裹高度，clear 这个词在 Flex 场景里直接失效。
清除浮动的常见错误写法和后果
很多人写的“清除”其实没生效，原因很具体：
-
display: block代替display: table：伪元素仅设clear: both但没设display: table，无法建立新块格式化上下文，清除失败 -
overflow: hidden裁剪绝对定位子元素：比如弹出菜单、tooltip 被意外截断 -
clear放在错误位置：比如插在两个浮动项中间，反而把后续内容推到下一行，布局错位 - 多个
clearfix嵌套时，display: table触发额外匿名表格盒，可能干扰 margin 合并或尺寸计算
Flex替代浮动时最容易忽略的兼容细节
不是加了 display: flex 就万事大吉，老项目迁移常踩这几个坑：
- 子元素若还保留
float: left，浏览器会优先处理 float，再套 flex 排列，结果不可控——必须显式重置float: none -
flex: 1在 IE10/11 需补全-ms-flex: 1，否则子项不伸缩 - 未设
flex-wrap: wrap时，所有子项被强行压在一行，小屏直接溢出，而浮动天然换行 - Flex 主轴是
row，但老代码习惯用float: right实现右对齐按钮；改用justify-content: flex-end后，若容器宽度不定，需加min-width: fit-content防止按钮被压缩
什么情况下还必须用浮动 + 清除
别硬套 Flex，有些场景它真干不了：
- 新闻正文内图片左/右浮动，让段落文字自动环绕——
float是唯一原生支持流式文本包裹的 CSS 方案 - 要兼容 IE8–IE9 的遗留系统，
flexbox在这些版本中基本不可用 - 只允许改 CSS、不能动 HTML 结构的老后台，只能靠
::after清除来临时修复塌陷
真正难的不是“怎么清浮动”，而是判断“该不该用浮动”——多数现代布局需求里，它早就不该出场了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
