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 在部分版本中有 bug（比如子项含 border-box + padding 时高度计算异常）。此时可：
- 用
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 或让它的高度由子项自然撑开。
