css浮动未被移除但不应再用于新项目布局，因其设计目标与现代需求错位：float使元素脱离文档流导致父容器高度塌陷，且与flex/grid不兼容；仅图文环绕和邮件模板两个场景不可替代。
没被浏览器移除，但作为布局手段，float 在新项目里真该彻底停用了——它不是“过时”，而是从设计目标上就不匹配现代布局需求。
为什么 float 一写上去父容器就塌陷？
这不是 bug，是机制必然结果：float 让元素脱离文档流，但又不完全脱离（仍影响邻近行内内容），所以父容器计算高度时直接“看不见”它。
- 常见错误现象：
background-color消失、border-bottom不显示、footer上移盖住内容 -
overflow: hidden能“撑开”高度，但会意外裁剪position: absolute的下拉菜单或 tooltip -
::after { clear: both }需额外伪元素，若父容器设了height或max-height，可能触发非预期滚动条 - 标准解法是
display: flow-root，但它只该用于兜底老代码，新布局不该以“需要清浮动”为前提来设计
在 flex 容器里写 float:left 会发生什么？
浏览器会直接忽略：float 和 clear 在 display: flex 或 display: grid 容器中声明无效。
- 不是“没生效”，而是模型冲突：flex 容器已创建独立格式化上下文，
float失去作用域 - 混用会导致渲染不可预测，尤其嵌套结构里，bug 往往藏得深、复现难
- CSS-in-JS 方案（如 Emotion、Styled Components）默认禁用
float相关 lint 规则，因为副作用无法静态分析 - React/Vue 组件中主动写
float: left，就像在 TypeScript 里手动管理内存——模型层面不兼容
哪些场景还必须用 float？
只剩两个真实、不可替代的场景：
- 邮件模板：Outlook 等客户端对
flex/grid支持极差，float是目前唯一稳定实现多栏排版的方式 - 纯图文流中的图片环绕：
float: left或float: right仍是唯一无需 JS、零兼容性风险、语义清晰的原生方案 - 其他所谓“兼容 IE8/9”的理由已基本失效：全球 IE10– 浏览器占比低于 0.03%（StatCounter 2026 Q1）
真正难的不是把 float: left 换成 display: flex，而是放弃用“怎么让这个 div 浮起来”去思考布局；一旦开始问“这个区域的数据流方向是什么？主轴和交叉轴如何定义？哪些项该收缩？哪些该撑满？”，float 就自然退场了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
