Flex项目上float无效是CSS规范强制行为，因FFC中float被明确定义为“不适用”，浏览器将其计算值设为none；应改用justify-content、margin-left:auto等Flex原生属性实现对齐。
Flex 项目上写 float 不起作用，不是你漏写了样式或优先级不够，而是浏览器根本不会让它生效——规范强制设为 none，且不触发任何浮动行为。
为什么 float 在 Flex 子元素上显示为 strikethrough？
你在 DevTools 的 Styles 面板看到 float: left 被加删除线，是因为它已被 Flex 格式化上下文（FFC）主动覆盖。只要父元素是 display: flex 或 display: inline-flex，其直接子元素就进入 FFC，而 float、clear、vertical-align 这三个属性在 FFC 中被规范明确定义为“不适用”。
- 这不是兼容性问题，Chrome、Firefox、Safari 全部一致执行
- Computed 面板里
float的值永远是none，不是“没继承”，是“被重置” - 用 Sass 嵌套写
.container { display: flex; .item { float: right; } }看似合理，实际float从第一帧渲染起就被丢弃
justify-content 和 float 冲突的根本原因
justify-content 是容器级主轴对齐控制，依赖所有子项统一参与尺寸计算与顺序调度；而 float 是单个元素主动脱离文档流、靠边“漂移”的行为，二者逻辑无法共存。
- 给某个子项加
float: right后，justify-content: center对它完全无效 - 该子项在 Layout 面板会被标记为 “not a flex item”，但它仍按 flex-item 规则参与交叉轴对齐（如
align-items），造成行为割裂 - 不同浏览器处理细节不一致：Chrome 可能把它挤到下一行，Safari 可能重叠在其他项目上
替代 float 的真正有效写法
几乎所有传统靠 float 实现的意图，在 Flex 里都有更干净、语义更明确的原生方案：
立即学习“前端免费学习笔记（深入）”；
- 整行右对齐 → 容器设
justify-content: flex-end - 两个按钮左右撑开 → 容器设
justify-content: space-between - 仅一个按钮推到最右 → 给它加
margin-left: auto - 单个居中（宽度不占满时）→
margin: 0 auto，但注意：若该项目是flex: 1，automargin 会失效 - 需要文字环绕效果？说明这个元素不该放在 Flex 容器里——把它移出，或改用
display: flow-root+float
最容易被忽略的是：你改了一个容器的 display，不只是换了个布局方式，而是切换了整个布局上下文——所有依赖旧文档流的行为（包括浮动、文字环绕、负 margin 微调）都会断开。这不是 bug，是模型切换的必然结果。
