float在flex子元素上显示为none，是因为css规范强制要求flex容器的直接子元素的float、clear和vertical-align属性“不适用”，浏览器必须将其计算值设为none。
会失效，而且是规范强制静默忽略，不是兼容性问题，也不是写法错误。
为什么float在Flex子元素上显示为none
当你在 DevTools 的 Computed 面板里看到 float 值是 none 或 “not applicable”，这不是样式没加载、没生效，而是 Flex Formatting Context（FFC）主动覆盖的结果。CSS 规范明确要求：只要一个元素是 display: flex 或 display: inline-flex 容器的**直接子元素**，它的 float、clear 和 vertical-align 就被定义为“不适用”，浏览器必须将其计算值设为 none。
常见误判点包括：
- 只看 Styles 面板里写了
float: right，却没查 Computed 面板确认是否真生效 - 用 Sass 嵌套写
.container { display: flex; .item { float: right; } }，视觉上合理，实际从渲染开始就被丢弃 - 以为 Safari 或旧版 Chrome 会“支持”它，结果发现各浏览器行为不一致——这不是 bug，是规范禁止后各家实现细节差异
想右对齐单个按钮，别用float: right，改用margin-left: auto
几乎所有靠 float 实现的老式对齐意图，在 Flex 里都有更干净、语义更明确的替代方式：
- 整行右对齐：给容器加
justify-content: flex-end - 单个项目靠右（比如操作栏最后一个按钮）：直接给它加
margin-left: auto - 左右两端各一个元素：容器用
justify-content: space-between - 单个项目水平居中（主轴为水平且宽度未占满）：
margin: 0 auto
注意：margin: 0 auto 在 flex: 1 的项目上会失效，因为宽度被拉满，自动 margin 没有可分配空间。
Flex容器自身被外部浮动“挤偏”，问题不在子项，而在它自己
真正容易被忽略的是：你调试半天 float 为啥不生效，其实根本原因可能在 Flex 容器**外面**。比如页面左侧有个 float: left 的侧边栏，后面紧跟的 .main { display: flex; } 区域被卡在侧边栏右侧空白处——这不是子元素的 float 失效了，而是这个 Flex 容器自己处于未清除的浮动上下文中。
解决方式是让 Flex 容器自身触发 BFC：
- 推荐：
display: flow-root（语义清晰，现代标准） - 兼容方案：
overflow: hidden（注意可能意外裁剪position: absolute子元素） - 避免：
::after { content: ""; display: table; clear: both; }加在 Flex 容器内部——它里面根本没有浮动，清了也没用
真要混用浮动和Flex？先物理隔离上下文
如果维护老代码，必须保留某块区域的 float 行为（比如图文环绕），又得把它塞进新 Flex 布局里，唯一靠谱做法是“隔开上下文”：
- 把需要浮动的元素包进一个普通
<div>，不设 <code>display，让它保持 block 流 - 让这个包装盒成为 Flex 容器的子项，由 Flex 控制它的位置
- 浮动逻辑完全留在包装盒内部，和 Flex 上下文互不干扰
千万别在 Flex 项目上同时写 float 和 justify-content——这不是增强控制，是主动引入不可预测的渲染冲突。模型切换不是叠加，是替换。
