17370845950

浮动清除是修复浮动塌陷的补救手段，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 是“原生布局”。前者越用越累，后者越用越顺。