Flex子元素设float无效是CSS规范强制行为，因FFC中float、clear、vertical-align被定义为不适用，应改用margin或justify-content等Flex原生属性。
Flex容器的子元素设float完全无效，这不是浏览器bug，而是CSS规范强制要求的行为——所有现代浏览器（Chrome、Firefox、Safari）都会将float计算值设为none，且不触发任何浮动效果。
Flex子元素上写float为什么被浏览器“划掉”
当你在DevTools里看到float: left被加删除线，并显示为none，说明它已被Flex上下文主动覆盖。这不是样式没加载或优先级低，而是规范层面的“静默忽略”：一旦父容器是display: flex或display: inline-flex，其直接子元素就进入Flex Formatting Context（FFC），而float、clear、vertical-align这三个属性在FFC中被明确定义为“不适用”。
常见误判点：
- 用Sass嵌套写了
.container { display: flex; .item { float: right; } }，看起来合理，实际float从一开始就没参与渲染 - 检查元素时只看“Styles”面板，没看“Computed”里的
float值是否为none - 以为
float失效是兼容性问题，反复换浏览器测试，浪费时间
float和Flex布局底层模型根本冲突
浮动是为文本环绕设计的“副作用布局”，会让元素部分脱离文档流；而Flex项目必须严格参与容器的尺寸计算、顺序控制与对齐调度。两者无法共存，不是因为实现难度，而是设计哲学不同。
立即学习“前端免费学习笔记（深入）”；
如果允许float在Flex中生效，会导致：
- 主轴对齐（
justify-content）和浮动方向打架，渲染结果不可预测 -
flex-wrap换行逻辑与clear行为互相干扰 - 父容器高度塌陷问题重现（而Flex本已天然解决该问题）
- 不同浏览器对“浮动的Flex子项”的处理细节不一致，比如Chrome可能把它挤到下一行，Safari可能重叠在其他项目上
想让某个Flex项目“靠右”或“推远”，别碰float，用margin或容器属性
几乎所有传统用float实现的意图，在Flex里都有更干净、语义更明确的替代方式：
- 单个项目靠右：给它加
margin-left: auto（主轴为水平时） - 两个项目左右撑开：在容器上设
justify-content: space-between - 整行右对齐：容器用
justify-content: flex-end - 需要文字环绕图片？那说明这个图片不该放在Flex容器里——把它移出，或改用
display: flow-root+float组合
注意：margin: 0 auto居中只在主轴为水平、且项目宽度不占满时有效；若项目是flex: 1，auto margin会失效。
Flex容器自身被外部浮动“挤偏”怎么办
真正容易被忽略的是：问题往往不在子元素，而在Flex容器自己处于一个未清除的浮动上下文中。比如前面有个float: left的侧边栏，后面紧跟的.main { display: flex; }会被卡在侧边栏右侧空白处。
这时要清理的是Flex容器的兄弟级浮动，不是它的子项：
- 给Flex容器加
display: flow-root（推荐，语义清晰，创建BFC） - 或用
overflow: hidden（兼容性更好，但可能意外裁剪内容） - 避免用
clear: both空标签，语义差且维护成本高
混用浮动与Flex时，最隐蔽的坑是“看似修好了”——比如加了overflow: hidden后布局正常了，其实是BFC把容器撑开了，但子元素早已不是浮动状态，只是普通Flex项目。结构混乱的本质被掩盖了。
