17370845950

直接结论：别用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 就只是历史遗留写法，不是技术选项。