Flex容器子元素的float属性被CSS规范强制设为none，因FFC中float、clear、vertical-align不适用；应改用margin-left: auto等Flex原生对齐方案。
Flex容器里的子元素写float完全没反应，不是你漏写了!important，也不是浏览器版本低——是CSS规范强制让它失效。所有现代浏览器（Chrome、Firefox、Safari）都会把float的计算值设为none，且不触发任何浮动行为。
为什么DevTools里看到float被划掉？
你在Styles面板看到float: left带删除线，Computed里显示none或not applicable，这不是样式加载失败，而是Flex格式化上下文（FFC）主动覆盖的结果。只要父元素是display: flex或display: inline-flex，它的直接子元素就进入FFC，而float、clear、vertical-align这三个属性在FFC中被规范明确定义为“不适用”。
常见误判点：
- 用Sass嵌套写
.container { display: flex; .item { float: right; } }，看起来合理，实际float从第一帧渲染起就被丢弃 - 只看Styles面板，没检查Computed里的
float值是否为none - 反复换浏览器测试，以为是兼容性问题，浪费调试时间
float和Flex底层模型根本冲突
浮动是为文本环绕设计的“副作用布局”，会让元素部分脱离文档流；而Flex项目必须全程参与容器的尺寸计算、顺序调度与对齐控制。两者无法共存，不是实现难度问题，而是设计哲学不同。
立即学习“前端免费学习笔记（深入）”；
若允许float在Flex中生效，会导致：
-
justify-content和float方向打架，渲染结果不可预测 -
flex-wrap换行逻辑与clear行为互相干扰 - 父容器高度塌陷问题重现（而Flex本已天然解决该问题）
- Chrome可能把该元素挤到下一行，Safari可能让它和其他项目重叠
该用什么替代float？
几乎所有靠float实现的老式对齐意图，在Flex里都有更干净、语义更明确的原生方案：
- 单个项目靠右 → 给它加
margin-left: auto（主轴为水平时） - 两个项目左右撑开 → 容器设
justify-content: space-between - 整行右对齐 → 容器用
justify-content: flex-end - 需要文字环绕效果？说明这个元素不该放在Flex容器里——把它移出，或改用
display: flow-root+float
注意：margin: 0 auto居中只在主轴为水平、且项目宽度不占满时有效；若项目是flex: 1，automargin会失效。
真正容易被忽略的是Flex容器自身的上下文
很多所谓“float失效”的问题，其实根源不在子元素，而在Flex容器自己处于一个未清除的浮动上下文中。比如左侧侧边栏用了float: left，又没触发BFC，整个Flex区域被“挤偏”或高度塌陷。这时该处理的是容器的父级，而不是往子元素上硬加float或clear。
检查Layout面板：设置了float的子元素会被标记为“not a flex item”——这是最直观的诊断信号，但提示非常隐蔽，容易被跳过。
