浮动清除是修复浮动塌陷的补救手段，Flex布局则从设计上消除该需求；浮动脱离文档流导致父容器塌陷，需hack修复，而Flex天然包裹子项、支持等高对齐与响应式布局。
浮动清除和 Flex 布局不是“二选一”的操作技巧，而是两种不同代际的布局逻辑。关键不在“怎么清浮动”，而在“是否还需要清”——Flex 从设计上就消除了这个需求。
浮动的本质是脱离文档流，清除只是补救
float 最初只为图文环绕而生，它让元素“浮”出标准流，导致父容器无法感知子项高度，从而塌陷。所谓“清除浮动”，其实是用各种 hack（如 overflow: hidden、伪元素 clear: both）强行把父容器“拉回来”。这不是布局能力，是修复手段。
- 浮动后子元素不参与父容器高度计算 → 必须手动干预
- 对齐靠 margin/padding 拼凑，垂直居中、等高列几乎无解
- 响应式切换需重写结构或加 JS，维护成本高
Flex 是为布局而生，天然包含子项
display: flex 让父容器成为弹性上下文，子元素默认在主轴（水平）排列，且始终被容器“包裹”。它不脱离文档流，所以没有塌陷问题，也不需要 clear 或 overflow 魔法。
- justify-content 和 align-items 直接控制整体对齐，语义清晰
- flex: 1 自动分配剩余空间，无需计算 width 和 margin
- align-items: stretch 默认等高，无需额外样式或 JS
什么时候保留 float？明确场景再用
不是所有浮动都要立刻替换，老项目中部分模块仍可维持 float，前提是它只承担简单、静态、低耦合的任务：
立即学习“前端免费学习笔记（深入）”；
- 文字环绕图片（
img { float: left; margin-right: 12px; }） - 侧边工具栏、固定宽度广告位等不参与整体响应逻辑的区块
- 兼容 IE8–9 的极少数遗留系统（但建议用 postcss-autoprefixer + fallback 方案）
新项目或重构时，优先用 Flex，局部兼容 float
现代开发中，推荐以 Flex 为主干布局方式，仅在必要处保留 float —— 不是混合使用，而是分层治理：
- 导航栏、卡片列表、表单布局、响应式栅格 → 全部用 Flex
- 富文本编辑器内嵌图、博客文章中的插图 → 仍可用 float
- 老页面某一块错乱区域 → 局部加 display: flex 替换 float，无需动全局
理解区别不在于记多少清除方法，而在于看清：float 是“借位排版”，Flex 是“原生布局”。前者越用越累，后者越用越顺。
