float 在 Flex 容器中失效是 CSS 规范规定的行为，因 Flex 布局完全接管定位逻辑，float、clear 和 vertical-align 被忽略；应改用 margin-left: auto、justify-content 或 flex/grid 实现对应布局。
浮动元素（float）在 Flexbox 容器中会失效，且可能引发不可预期的布局行为——这不是 bug，而是 CSS 规范明确规定的：当一个元素成为 Flex 项目（即其父容器 display: flex）时，float、clear 和 vertical-align 属性将被忽略。
为什么 float 在 flex 容器里不起作用
CSS Flex 布局采用的是全新的盒模型和排列逻辑，它完全接管了子元素的定位与流式行为。此时，浮动机制（原本为文字环绕设计）已无意义，浏览器直接将其“静音”处理。即使你写了 float: left，该元素依然按 flex 主轴方向排列，不会脱离文档流，也不会影响其他元素绕排。
常见异常表现
- 设置了
float: right的按钮仍在主轴起点对齐 - 期望用
float实现的“文字环绕图片”在 flex 容器内完全失效 - 混用后出现空白、错位或响应式断点异常，调试困难
正确替代方案（用 flex 本身解决）
Flex 提供更简洁、可控的布局能力，无需依赖浮动：
-
右对齐单个元素：用
margin-left: auto（推荐），或justify-content: flex-end（整行右对齐） -
图文并排/环绕效果：不用
float，改用display: flex或display: grid；图片设固定宽高，文字区域用flex: 1自适应 -
清除浮动需求：flex 容器天然不产生高度塌陷，无需
clearfix
迁移小提醒
检查现有代码中是否对 flex 子项误加了 float；若有历史样式库或重置 CSS 残留，建议全局搜索 float 并结合上下文移除或重构。现代布局中，float 仅适用于纯文本流环境（如传统文章排版），其余场景优先交由 flex 或 grid 处理。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。不复杂但容易忽略——只要记住：flex 容器里的子元素，float 已退休。
