能用但不该用；float未被移除但已不适合作为主流布局方案，其文档流丢失等缺陷被flexbox和grid彻底解决。
浮动还能用吗？能，但别主动选它
现在写新项目，float 不该出现在你的布局决策树顶端。它没被移除，浏览器也完全支持，但它的“能用”和“该用”是两回事。真正需要它的时候极少：比如 CMS 后台编辑器里临时加个图文环绕，或者维护十年前的老系统——这时候你不是在用浮动，是在和历史握手。
常见错误现象：float 一上，父容器高度塌陷、兄弟元素错位、响应式断点失效、外边距合并失控……这些问题不是“调一下就能好”，而是模型层面的副作用。它本质是让元素“假装不存在”，而现代布局要的是“真实参与计算”。
Flexbox 为什么一上来就替代了 float 的主力位置
因为 display: flex 解决了浮动最让人头疼的三个硬伤：文档流丢失、清除浮动（clearfix）的补丁式写法、以及对齐逻辑反直觉。
-
flex容器内的子项默认不脱离文档流，父容器高度自动包裹内容，无需::after { clear: both } - 居中？
justify-content: center+align-items: center两行搞定，不用 margin 负值或 position 绝对定位 - 等宽三列？
flex: 1或flex: 0 1 33.33%即可，不用算margin-right和:last-child排除 - IE11 兼容性仍需考虑，但除极少数政企内网系统外，已不是主流障碍
Grid 布局在哪种场景下让 float 彻底多余
当你需要同时控制行和列，比如卡片网格、仪表盘、带固定侧边栏的后台页，display: grid 就不是“比 float 好一点”，而是“维度降维打击”。
立即学习“前端免费学习笔记（深入）”；
- 三列自适应网格？
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))一行解决，不用媒体查询堆砌 - 模块位置调整？改
grid-area名字就行，HTML 结构完全不动 - 间距统一？用
gap，而不是靠margin拼凑，避免外边距叠加和清除逻辑 - 注意 Safari 旧版本对
gap渲染有 bug，但 flex 的gap更稳；所以别把 grid 用在按钮组、表单项这种一维微布局里
还在用 float 的人，最容易忽略的一点
不是语法不会写，而是忘了它和现代布局不能混用。你在 display: flex 的容器里还想着“怎么清浮动”，就像给电动车装化油器——根本不需要那个环节。一旦用了 Flex 或 Grid，float 就不该再出现，哪怕只是“试试看”。它的存在本身就会干扰主轴/交叉轴计算，尤其在嵌套结构里，bug 往往藏得深、复现难。
