能用，但仅限文字环绕图片、兼容IE8、维护遗留系统、编写邮件模板等特定场景；用float做布局会导致父容器塌陷、等高列难实现、垂直对齐失控；推荐优先用flex替代导航栏和表单布局。
float 还能用吗？先说结论
能用，但只该用在它原本设计的场景里：文字环绕图片、极简兼容性兜底、或维护老项目中无法动的局部模块。拿 float 做导航栏、两栏布局、垂直居中——不是不能跑，而是你正在给未来埋坑。
什么时候必须用 float？真实场景清单
不是“想用就用”，而是“不用不行”时才上 float：
- 需要实现自然的文字环绕效果，比如新闻正文里左图右文：
img { float: left; margin-right: 12px; }——shape-outside配合float是目前唯一原生支持非矩形环绕的组合 - 要兼容 IE8 或更老浏览器（虽然 2026 年已极少见），而项目又不允许加 polyfill 或降级脚本
- 接手一个满屏
float: left+.clearfix的遗留系统，且上线时间紧、改动范围受限，此时局部保留比全量重构更稳妥 - 写邮件模板（HTML email）：多数邮件客户端（如 Outlook Desktop）对
flex支持极差，float+table仍是事实标准
用 float 做布局，最常踩的三个坑
这些不是“可能出错”，而是只要用了，几乎必然遇到：
-
父容器高度塌陷：子元素一
float，父容器就“看不见”它们，height: auto变成 0 —— 必须加overflow: hidden或伪元素::after清除浮动，否则后续元素会上移、背景色消失、边框断开 -
等高列难实现：两个
float列，内容高度不同，就真的“不一样高”。没有原生方案，只能靠 JS 拉齐或 hack（如padding-bottom: 9999px; margin-bottom: -9999px;） -
垂直对齐完全失控：
float只管水平方向，vertical-align对它无效，margin-top也常被忽略 —— 想让浮动盒子垂直居中？基本得靠绝对定位或 JS 计算
flex 替代 float 的实操过渡策略
不是“一刀切换”，而是有节奏地替换关键区域：
立即学习“前端免费学习笔记（深入）”；
- 导航栏优先改：把
.nav ul { overflow: hidden; }和一堆li { float: left; }，换成.nav { display: flex; justify-content: space-between; align-items: center; }—— 子项的float属性会自动失效，无需删代码，直接生效 - 表单控件组改用
display: flex：比如标签+输入框同行显示，label和input不再需要float: left+clear: both，改用.form-row { display: flex; align-items: center; gap: 8px; } - 清除浮动类（
.clearfix）逐步下线：新写的容器一律不加，老容器在迭代时顺手删掉 —— 你会发现，删完后很多莫名的 margin 错位、背景丢失问题自动消失
真正难的不是语法转换，而是思维切换：float 是“让元素自己跑出去”，flex 是“让容器指挥所有孩子”。后者更可控，也更接近你写代码时的真实意图。
