因为Flex容器规范强制子元素的float、clear、vertical-align失效，删掉即可避免混合冲突；应改用justify-content、align-items、margin-left: auto等flex原生属性实现对齐。
为什么直接删掉 float 就能跑通？
因为 Flex 容器里的子元素一旦被纳入弹性布局，float、clear 和 vertical-align 这三个属性就彻底失效了——浏览器会忽略它们。这不是兼容性问题，而是规范行为。所以你不需要“覆盖”浮动，直接删掉就行。
常见错误是保留 float: left 同时又加 display: flex，结果布局错乱：主轴对齐失效、垂直居中不生效、甚至子项堆叠在左上角。这是典型“混合使用”导致的优先级冲突。
- 删掉所有子元素上的
float、clear、用于模拟间隙的margin-right（改用gap） - 父容器只设
display: flex，别加overflow: hidden或::after清除浮动 - 如果旧布局用了
width: 33.333%配合float，现在可改用flex: 1或flex: 0 0 33.333%
justify-content 和 align-items 怎么选才不踩坑？
这两个属性控制的是不同轴向的对齐，但新手常把“水平居中”和“垂直居中”混为一谈，结果写了一堆 margin: auto 或 line-height。
justify-content 管主轴（默认是水平方向），align-items 管交叉轴（默认是垂直方向）。只要记住“主轴 = flex-direction 的方向”，就不会反。
立即学习“前端免费学习笔记（深入）”；
- 横向排列（
flex-direction: row）→justify-content控制左右，align-items控制上下 - 纵向排列（
flex-direction: column）→justify-content控制上下，align-items控制左右 - 需要等高列？
align-items: stretch是默认值，不用写；想取消拉伸就显式设align-items: flex-start
响应式多栏怎么避免写一堆媒体查询？
靠 flex-wrap: wrap + min-width 组合，就能让三栏在窄屏自动折成两栏或单栏，不用每个断点都重写 float 和 clear。
老方案里，float 折行后容易顺序错乱、间距失控，是因为它本质不是为换行设计的；而 Flex 的 wrap 是原生支持的，换行后每行仍受 justify-content 和 gap 约束。
- 给子项设
flex: 0 0 250px（不缩放、不增长、最小宽 250px） - 父容器加
flex-wrap: wrap - 用
gap: 16px统一控制行列间距，比手动算margin更稳定 - 慎用
flex: 1在响应式场景——它会让子项强行撑满，窄屏下文字可能溢出
Flex 布局里 footer 怎么真正“粘底”？
传统 float + height: 100% 在内容少时根本撑不满，缩放后还容易溢出；Flex 的解法是靠容器高度约束 + margin-top: auto 推动 footer 下沉。
关键不在 footer 自己，而在它的父容器是否参与 Flex 流程。如果父容器没设 display: flex 或没给高度约束（如 min-height: 100vh），margin-top: auto 就无效。
- 外层容器设
display: flex; flex-direction: column; min-height: 100vh - 中间内容区用
flex: 1占满剩余空间 - footer 不设高度，只加
margin-top: auto—— 它会被自动推到最底部 - 别在 footer 上写
position: absolute，否则脱离 Flex 流，失去响应能力
float、散落在各处的 clearfix 类、还有靠 margin 模拟间隙的 hack 写法。它们不会报错，但会让 Flex 行为不可预测。 
