float在flex子元素上完全无效是CSS规范强制行为，浏览器将其计算值设为none且不触发BFC；应改用justify-content、margin-left:auto等Flex原生属性实现对齐。
float 在 flex 容器的直接子元素上完全无效，这不是 bug，是 CSS 规范强制行为——浏览器会静默将 float 计算值设为 none，且不触发 BFC。别浪费时间调试它，该换思路了。
为什么给 flex 子项写 float: left 没反应
因为一旦父容器设了 display: flex，它的直接子元素就进入 Flex 格式化上下文（flex formatting context），此时 float、clear、vertical-align 三个属性被规范明确定义为“不适用”。你在 DevTools 的 Computed 面板里会看到 float 显示为 not applicable 或 none，不是没生效，是根本没机会生效。
常见误判现象包括：
-
justify-content: center对某个加了float: right的子项完全无效，它还是贴左 - 以为加了
clear: both就能避开浮动侧边栏，结果毫无作用 - 在 Safari 和 Chrome 中渲染不一致：一个挤到下一行，一个重叠显示
想对齐？用 flex 原生方案替代 float
所有靠 float 实现的老式对齐意图，在 flex 里都有更直接、更可控的替代写法，且无副作用：
立即学习“前端免费学习笔记（深入）”；
- 单个按钮右对齐（其他居左）→ 给它加
margin-left: auto - 头部 logo 左、菜单右 → 父容器用
justify-content: space-between - 多个按钮等间距分布 → 用
justify-content: space-around或gap（推荐） - 文字环绕图片？那说明你不该把
<img>放进 flex 容器——flex 天生不支持文字环绕，得让它回到display: block上下文
老项目必须保留 float，怎么安全嵌入 flex 布局
不能把浮动元素直接塞进 flex 容器，而要物理隔离它的文档流影响范围：
- 给浮动区域套一层普通
<div>，比如<div class="legacy-float-wrapper"><div class="sidebar"></div></div> - 给这个 wrapper 加
display: flow-root（现代标准）或overflow: hidden（兼容 fallback），让它形成独立 BFC - 再把这个 wrapper 和其他模块（如
.main）一起放进 flex 容器中，由 flex 统一控制位置 - 切忌用
display: contents透传——IE 全不支持，且容易破坏盒模型语义和 JS 的offsetParent判断
flex 容器被前面的 float 侧边栏“挤偏”了怎么办
问题不在 flex 子项，而在 flex 容器自身处于未清除的浮动上下文中。此时要清理的是它的兄弟级浮动，不是它自己：
- 首选方案：给 flex 容器自身加
display: flow-root（语义清晰、无裁剪风险） - 次选方案：用
overflow: hidden（注意可能影响position: sticky或 Safari 旧版渲染） - 绝对不要在 flex 容器内部写
::after { clear: both }——它内部根本没浮动，清了也没用 - 检查 DevTools 的 Layout 面板：
float元素若被标记为 “not a flex item”，就是最直观的诊断信号
真正容易被忽略的是：你改了一个容器的 display，不只是换了个布局方式，而是切换了整个布局上下文——所有依赖旧文档流的行为（包括浮动、文字环绕、负 margin 微调）都会断开。这不是 bug，是模型切换的必然结果。
