flex子元素设float在devtools中被划掉，是因为父容器启用flex格式化上下文（ffc）后，float、clear、vertical-align被规范明确定义为“不适用”，浏览器将其计算值强制设为none，属静默覆盖而非加载或优先级问题。
Flex子元素设float为什么在DevTools里被划掉？
因为浏览器不是“没加载”或“优先级低”，而是直接按CSS规范把float的计算值设为none。只要父元素是display: flex或display: inline-flex，其直接子元素就进入Flex Formatting Context（FFC），而float、clear、vertical-align这三个属性在FFC中被明确定义为“不适用”。你在Styles面板看到的删除线，是规范层面的静默覆盖，不是bug。
justify-content和float为什么不能共存？
两者底层逻辑冲突：justify-content依赖所有子项统一参与主轴尺寸计算与顺序调度；而float是单个元素主动脱离文档流、靠边“漂移”的行为。一旦给某个子元素加了float: right，它就不再被视为Flex项目，justify-content: center对它完全无效，甚至可能在Chrome里被挤到下一行，在Safari里和其他项目重叠。
想让某个Flex子元素“靠右”，该用什么替代float？
几乎所有传统靠float实现的意图，都有更干净、语义更明确的Flex原生写法：
- 单个项目推到最右：给它加
margin-left: auto - 两个按钮左右撑开：容器设
justify-content: space-between - 整行右对齐：容器设
justify-content: flex-end - 单个居中（宽度不占满时）：用
margin: 0 auto，但注意若该项目有flex: 1，automargin会失效 - 需要文字环绕效果？说明这个元素不该放在Flex容器里——把它移出，或改用
display: flow-root+float
最容易被忽略的是布局上下文切换本身
你改了一个容器的display，不只是换了个布局方式，而是切换了整个布局上下文。所有依赖旧文档流的行为——包括float、文字环绕、负margin微调、甚至外部margin合并——都会断开。这不是兼容性问题，也不是浏览器差异，是模型切换的必然结果。调试时如果发现布局“突然偏移”，先看Computed面板里float是不是none，再确认那个元素是否还被标记为“flex item”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
