用 flexbox 的 align-items: stretch 替代浮动是实现等高列最简洁可靠的方案，因浮动脱离文档流导致父容器无法包裹子项高度，各列高度互不影响，而 flex 布局下子项默认拉伸至最高列高度，天然支持响应式与多端兼容。
用 flexbox 的 align-items: stretch 替代浮动（Float）实现等高列，是目前最简洁可靠的方案。浮动本身不支持等高，靠 hack（如 padding-bottom + margin-bottom 模拟）或 javaScript 补齐，既脆弱又难维护。
为什么 float 无法真正实现等高列
浮动元素脱离文档流，父容器默认不包裹子项高度，各列按自身内容撑开，高度互不影响。即使视觉上并排，实际高度差异会暴露出来，尤其在背景色、边框或阴影场景下非常明显。
- 清除浮动（clear）只能解决父容器塌陷，不能拉齐列高
- 伪等高（如负 margin + 大 padding）依赖固定高度或预设值，响应式下易失效
- 无 js 方案中，float 本质不具备“对齐高度”的能力
用 flex 实现真正等高列（一行多列）
只需给父容器设 display: flex，子项默认就会被 align-items: stretch 拉伸到容器最大高度（无需显式写该属性，它是 flex 默认值）。
- 子项高度由最高列决定，所有列视觉上严格对齐
- 支持响应式：配合
flex-wrap: wrap或媒体查询可轻松适配多端 - 兼容性好：chrome 29+、firefox 28+、safari 6.1+、edge 12+ 均原生支持
处理单列内容不足时的细节问题
如果某列内容极少（比如只有标题），而其他列很长，它会被拉伸但内部文字可能贴顶。此时可加 display: flex; flex-direction: column; justify-content: center; 让内容垂直居中，或用 padding / min-height 微调视觉节奏。
立即学习“前端免费学习笔记（深入）”；
- 避免对子项设
height: 100%—— flex 下无效且可能破坏拉伸逻辑 - 若需底部按钮固定在列底，可用
margin-top: auto推下去（flex 子项特性） - 文字溢出可用
overflow: hidden; display: -webkit-box;配合-webkit-line-clamp控制行数
过渡建议：从 float 到 flex 的最小改动
不用重写 html 结构。保留原有 class 名，只改 css：
- 把
.row { overflow: hidden; }改成.row { display: flex; } - 删掉所有
float: left/right和width（改用flex: 1或flex: 0 0 33.333%） - 移除
clear相关样式 —— flex 下不需要
基本上就这些。不复杂但容易忽略：flex 等高是天然行为，不是“技巧”，用对了反而更少写代码。