flex容器子项的float属性无效，因规范强制设为none；应改用flex属性（如margin-left: auto）实现对齐；老项目需包裹浮动元素并创建bfc隔离。
flex容器里写了float: left但没效果，为什么？
浏览器规范明确要求：只要元素是display: flex容器的直接子项，它的float属性就会被强制设为none，且不触发BFC。这不是bug，是设计使然——flex布局和浮动属于两套互斥的定位机制。
常见现象包括：
-
float: left的按钮没左对齐 -
clear: both加了也没用 - 父容器高度看起来“塌陷”，但其实子项根本没脱离文档流
打开DevTools，在Computed面板里查目标元素的float值，大概率显示not applicable或none。临时删掉父容器的display: 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>包裹浮动区域：<code><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容器自身处于未清除的浮动上下文中。此时要清理的是它的兄弟级浮动，不是它自己。
典型表现是：左侧有一个float: left侧边栏，后面的flex容器被挤到右侧、错位或高度异常。
解决办法：
- 在flex容器前插入一个清浮动元素：
<div style="clear: both"></div> - 或给flex容器自身加
overflow: hidden（慎用，可能裁剪内容或影响position: sticky） - 更稳妥的是给flex容器的父级加
display: flow-root，既触发BFC又不带副作用
最隐蔽的坑是：有人给flex容器加overflow: hidden后，“浮动子项”好像显示正常了——其实是误判。真正起作用的是BFC，而子项早已不是浮动状态。这个“修复”掩盖了结构混乱的本质，还可能在Safari旧版本中引发渲染错乱。
