真正该保留 float 的只有图文环绕这一种场景，即文字自然绕排图片时用于等内联替换元素；其他如导航栏、卡片列表等结构化布局必须用 flex，而修复父容器塌陷优先选 display: flow-root。
该用 float 的场景极窄，绝大多数所谓“需要 float”的情况，其实只是没清理旧代码或误读语义——真正该保留 float 的，只有图文环绕这一种。
只在文字自然绕排图片时才用 float
比如新闻正文里一张左对齐的配图，文字从右侧和下方流过去。这是 float 唯一被 CSS 规范明确定义的用途。
-
float: left或float: right必须作用于<img>或类似内联级替换元素，且父容器是普通文本流（如<p></p>、<article></article>） - 一旦你开始给导航栏、卡片列表、表单字段加
float，就是在用错技术 - 强行用
flex模拟图文环绕，得靠 JS 算行高、插节点，反而更重、更难维护
只要涉及组件级排列，一律用 display: flex
导航栏、侧边栏、表单字段组、评分卡片、按钮组……这些不是“文字绕图”，而是“结构化容器”，float 在这里没有语义正当性。
- 老代码里出现
.clearfix、clear: both、overflow: hidden来撑高父容器，就是float被滥用的铁证 -
flex容器中float属性仍会生效（优先级更高），导致布局不可控；必须显式写float: none才能清干净 -
justify-content和gap替代了手动算width: calc(33.333% - 2px)和margin-right，响应式断点里也不用反复重置float
display: flow-root 是比 flex 更轻量的塌陷修复方案
如果目标只是让父容器正确包裹浮动子项（比如富文本里一段带图的文字），又不想改变子项排列方式，display: flow-root 比 display: flex 更精准。
- 它只创建 BFC，不干扰子项流式布局，也不影响
position: absolute弹层的定位上下文 - 和
display: flex互斥，不能共存；IE11 及更早版本不支持，可用@supports降级 - 若父容器已有
contain: layout，可能与flow-root的 BFC 行为冲突，需实测验证
真正容易被忽略的点在于：浏览器不会自动帮你判断语义。你写了 float: left，它就执行；你写了 display: flex，它也执行。但错位、塌陷、垂直居中失败、响应式错乱……这些问题的根，往往不在属性本身，而在你一开始就没想清楚——这个元素，到底是“图”还是“栏”？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
