Flexbox通过display: flex使子项自动等高，依赖align-items: stretch默认行为；需避免子项设置align-self: flex-start或固定height，确保父容器有明确高度来源。

用 display: flex 最直接解决多列等高问题

浮动布局（float）本身不提供列间高度对齐能力，强行用 clear 或伪元素 hack 容易失控。现代方案首选 Flexbox：父容器设 display: flex，子项自动拉伸到最高列的高度。

关键点：

• flex-direction: row（默认值，不用显式写）保证水平排列
• 子项无需设 height 或 min-height，align-items: stretch（默认）会生效
• 避免给子项设 flex: 0 0 auto 或 align-self: flex-start，否则会退出等高行为
• 如果子项内有 margin-bottom 拉开间距，需注意它不会影响父容器的 stretch 计算——等高的是内容盒（content box），不是 margin 边界

.container {
  display: flex;
  gap: 16px; /* 推荐用 gap 替代 margin，更可控 */
}
.item {
  flex: 1; /* 等宽且等高 */
  background: #f5f5f5;
}

为什么不用 float + JS 计算高度

手动遍历 DOM、取 offsetHeight、再统一设 min-height 的做法看似可控，实则脆弱：

• 响应式场景下窗口 resize 时必须监听并重算，漏掉就错位
• 异步加载内容（如图片、API 数据）会导致初始计算偏小，需额外 Promise.all 或 img.onload 钩子
• 遇到 transform、scale 或 will-change 等渲染层变化，offsetHeight 可能返回旧值
• SSR 或 hydrate 阶段 JS 尚未执行，首屏渲染仍会闪动

除非遗留系统强绑死浮动布局且无法升级 CSS，否则不建议走这条路径。

兼容性要求高时的降级策略

若需支持 IE10/11，Flexbox 的 align-items: stretch

• 用 display: table-cell 替代：display: table; width: 100% 父容器 + display: table-cell 子项，天然等高，但失去弹性宽度控制
• 放弃“严格等高”，改用 min-height 设为预估最大值（如 min-height: 300px），配合 overflow: hidden 截断超长内容
• 用 grid 作为 Flex 的替代（display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))），IE 不支持，但 Chrome/Firefox/Safari 均无问题

Flex 等高失效的常见原因

写了 display: flex 却没等高？先检查这几个地方：

• 父容器是否被设了 height: 0、overflow: hidden 或 position: absolute 且未设 top/bottom，导致高度坍缩
• 子项是否意外设置了 align-self: flex-start 或 height 固定值，覆盖了默认 stretch
• 是否混用了 float —— Flex 容器内子项的 float 属性会被忽略，但若父容器本身是浮动的，可能引发外层布局塌陷
• 是否在子项里用了 position: absolute 内容？它脱离文档流，不影响父项 stretch 高度，但视觉上可能“撑不起来”

Flex 等高不是魔法，它依赖父容器有明确的可用高度来源（内容、min-height、或父级约束）。最常被忽略的是：忘了给父容器加 min-height 或让它的高度由子项自然撑开。