flex布局比浮动更优，因其天然不塌陷、无需清除、行为可预测；浮动则导致高度塌陷，需用clear/overflow/伪元素补救，且存在裁剪、失效、嵌套干扰等副作用。
浮动不是“不能用”，而是大面积布局场景下，它已不是合理选择——Flex 不仅写法更直白、行为更可预测，还天然规避了高度塌陷、清除失效、父子尺寸错位等浮动固有缺陷。
浮动导致父容器高度塌陷，而 Flex 容器默认包裹子项
浮动元素脱离文档流，父容器无法感知子项高度，背景色、边框、后续内容全会上移；你必须加 clear: both、overflow: hidden 或伪元素 ::after 强行补救。但这些方案本身就有副作用：
-
overflow: hidden会裁剪position: absolute的弹层或 tooltip -
::after若只设clear: both没配display: table，清除根本无效 - 多个
clearfix嵌套时，display: table触发匿名表格盒，干扰 margin 合并
Flex 容器默认触发 BFC，子项无论是否换行、溢出、伸缩，父容器都能正确计算高度——clear 在 Flex 场景里直接失效，因为压根不需要。
Flex 子项默认不脱离文档流，浮动却必须手动重置
老项目迁移时，常有人给 Flex 容器加了 display: flex，但子项还留着 float: left。浏览器优先处理 float，再套 Flex 排列，结果完全不可控。
- 必须显式重置所有子项的
float: none - 否则
justify-content和align-items可能被忽略或表现异常 - IE10/11 中
flex: 1必须补-ms-flex: 1，否则子项不伸缩
Flex 天然支持响应式换行，浮动需额外控制宽度和清除逻辑
浮动换行依赖元素宽度总和是否超限，且换行后位置难控；Flex 只要设 flex-wrap: wrap，子项就自动折行，无需计算百分比或媒体查询干预。
- 未设
flex-wrap: wrap时，所有子项被强行压在一行，小屏直接溢出——这是常见疏漏 - 浮动右对齐按钮习惯用
float: right，改用justify-content: flex-end后，若容器宽度不定，得加min-width: fit-content防止按钮被压缩 - 浮动图文混排虽仍必要（如正文图片文字环绕），但那属于局部、语义化场景，不是布局主干
真正难的不是“怎么清浮动”，而是意识到：当你要做的是导航栏、卡片列表、表单对齐、响应式栅格这类通用布局时，浮动已经不是解法，而是问题本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
