因为flex容器的直接子项float属性被浏览器强制设为none，这是规范设计而非bug；flex与浮动互斥，应改用justify-content、margin-auto等flex属性实现对齐，或用wrapper隔离浮动。
flex容器里写了float: left但没效果，为什么？
因为浏览器规范明确要求：只要元素是display: flex容器的直接子项，它的float属性就会被强制设为none，且不触发BFC。这不是bug，是设计使然——flex布局和浮动属于两套互斥的定位机制。
常见现象包括：float: left的按钮没左对齐、clear: both加了也没用、父容器高度看起来“塌陷”但其实子项根本没脱离文档流。
- 打开DevTools，在Computed面板里查目标元素的
float值，大概率显示not applicable或none - 临时删掉父容器的
display: flex，如果布局立刻恢复正常，基本可确认是混用冲突 - 别指望
vertical-align或clear能救场——它们对flex子项完全无效
想让flex容器里的按钮右对齐，该用float还是flex属性？
必须用flex属性。写float: right不仅无效，还会掩盖真实问题，增加调试成本。
正确做法取决于场景：
立即学习“前端免费学习笔记（深入）”；
- 单个操作按钮右对齐 → 给它加
margin-left: auto - 头部左右各一栏（如logo+菜单）→ 父容器用
justify-content: space-between - 多个按钮需要等间距 → 用
justify-content: space-around或gap
注意：margin-left: auto在flex主轴上会吞噬剩余空间，比float更可控、无副作用。
老项目里必须保留float代码，怎么安全嵌入flex布局？
不能把浮动元素直接塞进flex容器，而要把它“包一层”再作为flex项目。
例如原结构是：
<div class="sidebar"></div> <div class="main"></div>
其中.sidebar用了float: left。正确改造方式是：
- 新增一个普通
<div>包裹浮动区域：<div class="legacy-float-wrapper"><div class="sidebar"></div></div> - 给这个wrapper加
overflow: hidden或display: flow-root，让它形成独立BFC，隔离浮动影响 - 再把这个wrapper和
.main一起放进flex容器中，由flex统一控制位置
这样浮动只在wrapper内部生效，对外部flex布局零干扰。切忌用display: contents透传——IE全不支持，且容易破坏盒模型。
flex容器被前面的float侧边栏“挤偏”了，怎么办？
问题不在flex子项，而在flex容器自身处于未清除的浮动上下文中。此时要清理的是它的兄弟级浮动，不是它自己。
推荐方案（按优先级排序）：
- 给flex容器自身加
display: flow-root（现代标准，语义清晰，无裁剪风险） - 退而求其次用
overflow: hidden，但注意可能意外裁剪下拉菜单或tooltip - 在浮动元素的父容器上加伪元素清除：
::after { content: ""; display: table; clear: both; }
别给flex容器加clear: both——它不是块级流中的普通兄弟元素，clear对它不起作用。
最容易被忽略的一点：即使视觉上看起来“修好了”，也要检查position: sticky是否还生效。如果sticky元素的直接父容器是flex item，它的包含块就不合法，吸附行为会退化为relative。
