flex子元素设float会直接退出flex上下文：浏览器将其display重置为block，脱离flex格式化上下文，导致justify-content、align-items等全部失效，退化为普通块级元素。
Flex子元素设float会直接退出Flex上下文
一旦子元素声明了float，它就不再是真正的Flex项目——浏览器按规范将其display重置为block，并脱离Flex格式化上下文（FFC）。这意味着justify-content、align-items、order甚至flex缩放规则全部失效，该元素退化为普通块级元素，仅受浮动自身规则影响。
常见错误现象包括：justify-content: center对加了float: left的子项完全没反应；align-self: flex-end被忽略；父容器高度计算异常（因该子项已部分脱离文档流）。
- 不是“没生效”，而是“被切换了布局模型”——它已不在Flex调度体系内
- DevTools Layout面板会标记该元素为“not a flex item”，但这个提示非常隐蔽
- 不同浏览器处理细节不一致：Chrome可能把它挤到下一行，Safari可能重叠在其他项目上
float和justify-content逻辑根本冲突
justify-content是容器级主轴对齐控制，依赖所有子项统一参与尺寸计算与顺序调度；而float是单个元素主动脱离文档流、靠边“漂移”的行为，二者无法共存。强行混用会导致渲染不可预测：比如justify-content: space-between遇上float: right，结果既不是两端对齐，也不是右浮动，而是位置错乱或重叠。
真正想实现“左按钮+右按钮”，应直接用Flex原生方式：
- 整行右对齐 → 容器设
justify-content: flex-end - 两个按钮左右撑开 → 容器设
justify-content: space-between - 仅一个按钮推到最右 → 给它加
margin-left: auto - 单个居中（宽度不占满时）→
margin: 0 auto
clear在Flex容器里完全无意义
clear的作用前提是存在已浮动的兄弟元素，靠“避开浮动边界”来换行或定位。但Flex子项从不浮动，也不脱离文档流——它们的位置由flex-wrap、order、flex-grow等规则严格决定，根本没有“需要清除”的上下文。
给Flex子项写clear: both不会触发任何布局变化，Computed值始终是none。试图用它解决“被侧边栏挤偏”的问题，本质是找错了对象——问题往往出在Flex容器自身处于未清除的浮动父级中，而非子项。
- 若页面有老式
float侧边栏，确保Flex容器父级已触发BFC（如display: flow-root） - 别在Flex容器内部用
::after { clear: both }——它清的是不存在的东西 - 需要垂直间隔？优先用
gap，而不是靠clear硬顶
调试时最容易忽略的关键信号
看到float没起作用，第一反应不该是“调优先级”或“换浏览器”，而是立刻检查Computed面板里的float值是否为none，以及Layout面板是否标记该元素为“not a flex item”。这两个信号比Styles面板里有没有划掉线更可靠。
真正难察觉的是：你改了一个display值，不只是换了个样式，而是切换了整个布局上下文——所有依赖旧文档流的行为（浮动、文字环绕、负margin微调）都会断开。这不是bug，是模型切换的必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
