直接结论：别用float，优先用flex。float本非布局设计，易致塌陷、错位、响应断裂；flex语义清晰、控制精准、响应友好，代码少、调试易、可访问性好。
多列布局该用 float 还是 flex？直接结论：别用 float
除非要兼容 IE8 或更老的浏览器，否则 float 不该出现在 HTML5 静态网页的多列布局中。它本就不是为布局设计的，强行用来做列，会触发清除浮动、高度塌陷、响应式断裂等一系列隐性问题。而 display: flex 是 CSS3 明确为一维布局（行或列）设计的方案，语义清晰、控制精准、响应友好。
float 做多列的实际表现和典型问题
即使你写出了看似“能用”的 float 多列，也大概率埋着坑：
-
float元素脱离文档流，父容器高度塌陷——必须额外加clear: both或伪元素::after清除，否则后续内容会上移 - 列宽靠百分比或固定值硬调，
float本身不提供对齐、间距、换行控制，比如想让三列等宽且中间留空隙，得靠margin手动算，极易错位 - 响应式时，
float不会自动换行或重排，必须配合大量@media+width+clear组合拳，维护成本高 - 遇到文字环绕、内联块混排等场景，
float行为更难预测，调试耗时远超收益
flex 实现常见多列布局的写法要点
用 display: flex 布局容器，子项默认横向排列，通过几个关键属性就能覆盖绝大多数静态页需求：
- 基础多列：
`.container { display: flex; } .item { flex: 1; } /* 等宽三列只需三个 .item */` - 不等宽列：
flex: 2和flex: 1可按比例分配剩余空间（注意：前提是没设width） - 列间间隙：
gap: 1rem直接生效（IE 不支持，但现代静态页基本不考虑 IE） - 响应式换行：
flex-wrap: wrap+ 子项设flex: 0 0 300px（即不缩放、最小宽 300px），小屏自动折行 - 垂直居中对齐：
align-items: center一行搞定，不用float+line-height+vertical-align堆砌
为什么静态网页尤其适合用 flex
HTML5 静态页通常结构简单、样式确定、无需复杂回退逻辑。这时候用 flex 的优势特别明显：
立即学习“前端免费学习笔记（深入）”；
- 代码量少：一个
display: flex替代过去七八行float+clear+overflow组合 - 调试直观：浏览器开发者工具里能看到主轴/交叉轴方向、剩余空间分配、换行状态，出问题一眼定位
- 移动端友好：
flex-wrap和min-width配合天然适配小屏，不用写一堆@media修正float的错位 - 可访问性更好：
flex不改变 DOM 顺序，屏幕阅读器读取逻辑自然；而float常伴随order错乱或视觉与语义脱节
真正需要纠结的，不是选 float 还是 flex，而是要不要为某个特定旧设备破例。如果目标用户里没有强制要求支持 IE10 以下，那 float 就只是历史遗留写法，不是技术选项。
