Flex子元素float无效是CSS规范强制行为，因FFC中float被明确定义为“不适用”，浏览器将其计算值设为none；应改用justify-content、margin-left:auto等Flex原生属性实现对齐。
Flex容器中子元素的float完全无效，这不是兼容性问题或写法错误，而是CSS规范强制要求的行为——浏览器会把float、clear、vertical-align三个属性的计算值设为none，且不触发任何浮动效果。
为什么float在display: flex容器里被划掉？
你在DevTools的Styles面板看到float: right带删除线，并显示为none，不是优先级低或没加载，而是子元素一旦进入Flex Formatting Context（FFC），这三个属性就被规范明确定义为“不适用”。Chrome、Firefox、Safari全部一致执行，没有例外。
常见误判点包括：
- 用Sass嵌套写了
.container { display: flex; .item { float: right; } }，看起来合理，实际float从第一帧渲染起就被丢弃 - 只看Styles面板，没检查Computed里
float是否为none - 以为是bug，反复换浏览器测试，浪费时间
justify-content和float冲突时该信谁？
信justify-content。因为float在FFC中已被静默忽略，它对Flex项目的主轴对齐毫无影响。你加了float: right，justify-content: center依然生效——但那个元素可能被标记为“not a flex item”，导致行为割裂：主轴对齐失效，交叉轴（如align-items）却还在起作用。
立即学习“前端免费学习笔记（深入）”；
不同浏览器处理细节不一致：
- Chrome可能把它挤到下一行
- Safari可能让它和其他项目重叠
- Layout面板里它会被标为“not a flex item”，但这个提示非常隐蔽
替代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
Flex容器自己被外部float“挤偏”怎么办？
真正容易被忽略的是：问题往往不在子元素，而在Flex容器自身处于一个未清除的浮动上下文中。比如左侧有float: left的侧边栏，整个Flex区域被挤到右边空白处，甚至高度塌陷。
解决方法是让Flex容器的父级触发BFC：
- 加
display: flow-root（推荐，语义清晰，无副作用） - 或
overflow: hidden（注意可能裁剪position: absolute子元素） - 别用
::after { clear: both }去“清除”Flex容器内部——它内部根本没浮动，清了也没用
你改了一个容器的display，不只是换了个布局方式，而是切换了整个布局上下文——所有依赖旧文档流的行为（包括浮动、文字环绕、负margin微调）都会断开。这不是bug，是模型切换的必然结果。
