flexbox 是当前最简可靠的等高方案，将容器设为 display: flex 后子项默认交叉轴拉伸实现等高；grid 更适合复杂嵌套等高，通过 grid-template-rows: 1fr 精确控制行高。
为什么用 float 实现等高列会失效
浮动元素的高度由自身内容决定，父容器不会自动拉伸包裹；即使所有 .column 都设了 height: 100%，也没用——因为父容器高度是 0。常见现象是：三列中一列内容多、明显更高，其余两列“塌陷”到顶部或错位。
- 根本原因：
float脱离文档流，不参与父容器高度计算 - 清除浮动（如
.row::after）只解决父容器塌陷，不解决列高不一致 -
min-height是临时补丁，无法真正“等高”，尤其在响应式切换时更不可靠
Flexbox 是当前最简可靠的等高方案
把容器设为 display: flex，子项默认沿主轴排列、交叉轴自动拉伸——这正是等高的底层机制。无需 JS、不依赖 hack，一行关键声明就能生效。
-
display: flex必须加在直接父容器上（如.row），不能只加在子项 - 确保子项没设
flex-shrink: 0或固定height，否则会压制等高行为 - 移动端小屏下，用
flex-direction: column切换为单列时，等高依然保持（因仍属同一 flex 容器）
示例关键 CSS：
.row {
display: flex;
}
.column {
flex: 1; /* 等分剩余空间，同时触发等高 */
padding: 1rem;
}
Grid 布局对复杂嵌套等高更可控
当需要“某列内部再分三等高子列”，或列宽需精确控制（如 2fr / 1fr / 1fr），display: grid 比 Flexbox 更直观。它天生二维，行高列宽可独立约束。
-
grid-template-rows: 1fr强制所有行轨道等高，比 Flex 的交叉轴拉伸更明确 - 若某列需内部再等高布局，直接在其上加
display: grid和grid-template-rows: 1fr，无需额外 wrapper - 注意：IE11 不支持现代 Grid，如需兼容，得降级用 Flexbox + fallback
嵌套等高示例：
.outer-grid {
display: grid;
grid-template-columns: 1fr 2fr;
}
.left-column { /* 左侧单列，内部三块等高 */
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
媒体查询切换时等高逻辑别被破坏
很多人在断点里重写 display 属性（比如从 flex 改成 block），结果等高瞬间消失——这不是媒体查询的问题，是布局模型切换导致的。
- 推荐始终用同一布局模型贯穿所有断点：Flexbox 全程，或 Grid 全程
- 只改
flex-direction（row→column）或grid-template-columns，别动display - 避免在媒体查询里给子项加
height: auto或min-height: unset，这些会覆盖 flex/grid 的等高逻辑
真正容易被忽略的是：等高依赖于容器有明确的高度来源（内容、min-height 或父级约束）。如果整个页面高度靠内容撑开，而你又在小屏下把 .row 设为 flex-direction: column，那它依然等高——但视觉上可能不如预期，因为“等高”此时是纵向的，而非横向并排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
