flex子元素的float属性被css规范强制设为none，因其进入flex格式化上下文（ffc）后不适用；justify-content与float底层模型冲突，无法共存，应改用margin-left: auto等原生flex方案。
Flex容器里的子元素写float根本不会生效，不是优先级低、没刷新或浏览器兼容问题，而是CSS规范强制要求浏览器把它当“不存在”——计算值直接设为none，连布局逻辑都不走。
为什么float在Flex子元素上显示为strikethrough
你在DevTools的Styles面板看到float: left被划掉，是因为它进入了Flex格式化上下文（FFC），而规范明确定义float、clear、vertical-align在这类上下文中“不适用”。浏览器不是“没读到”，是读到了然后主动丢弃。
- 哪怕父容器只加了一行
display: flex，所有直系子元素立刻进入FFC - Sass嵌套写
.container { display: flex; .item { float: right; } }，float从第一帧渲染起就无效 - Computed面板里
float永远显示none，这不是重置，是覆盖
float和justify-content冲突的本质
justify-content靠统一调度所有子项的尺寸与顺序来对齐；而float是单个元素主动脱离文档流、“自己找边站”的行为。两者底层模型冲突，无法共存。
- 给某个子项加
float: right后，justify-content: center对它完全失效 - 该子项在Layout面板会被标记为“not a flex item”，但它仍按flex规则参与交叉轴对齐（如
align-items），造成行为割裂 - 不同浏览器处理细节不一致：Chrome可能把它挤到下一行，Safari可能让它和其他项目重叠
真要右对齐一个按钮，别用float，用margin-left: auto
几乎所有靠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，是模型切换的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
