现代三栏等高布局首选Flex或Grid：Flex通过display: flex与align-items: stretch自动等高，子项用flex: 0 0 200px（侧栏）和flex: 1（主栏）；Grid通过grid-template-columns: 200px 1fr 200px天然等高，二者均语义正确、响应式稳健，避免float/table-cell等易塌陷、难维护的旧方案。
现代三栏等高布局，直接用 display: flex 或 display: grid，别碰 float、table-cell 或负 margin 套路——那些方案要么语义错误，要么在响应式或内容变化时高度突然不一致。
flex 实现三栏等高：父容器设 display: flex 就够了
Flex 的交叉轴默认是 align-items: stretch，只要子项没写 height、min-height 或 align-self: flex-start，它们就会自动拉伸到父容器最大高度。
- 父容器必须是直接包含三栏的元素，且不能有高度限制（如
height: 200px）干扰拉伸 - 左右栏可固定宽度：
width: 200px或更稳妥的flex: 0 0 200px - 中间栏用
flex: 1，不是flex: 1 1 auto——后者在内容撑大时可能缩放，破坏等高 - 如果某栏要“不参与等高”，比如侧边栏只按内容高度显示，加
align-self: flex-start
.container { display: flex; gap: 12px; }
.left, .right { flex: 0 0 200px; }
.center { flex: 1; }grid 实现三栏等高：grid-template-columns + 默认行行为
Grid 下，同一行内的所有网格项天然等高，因为行高由该行最高项决定。不需要额外设置 grid-template-rows，也不用 hack。
- 只要不显式定义多行（比如没写
grid-template-rows: 1fr 1fr），所有三栏就在同一行轨道里，自然等高 -
1fr在列定义中和flex: 1行为一致，表示“拿走剩余空间” - IE11 不支持
gap和1fr，真要兼容就回退用 Flex，别硬套 Grid 前缀 - 如果主内容区需要最小高度（比如撑满视口），加
min-height: 100vh到父容器，不是给子项加height: 100%
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
gap: 12px;
}为什么 float 和 table-cell 容易出高度问题
这两类方案表面能“看起来等高”，但实际逻辑脆弱，稍一改动就失效。
立即学习“前端免费学习笔记（深入）”；
-
float元素脱离文档流，父容器高度塌陷是常态；靠overflow: hidden或伪元素清浮只是补丁，不是解法 -
table-cell虽然天生等高，但语义错误——它本用于表格数据，不是页面结构；且vertical-align在响应式下行为不可控，width百分比计算也常因盒模型偏差错位 - 两者都不支持
gap，只能靠margin控制间距，而margin会干扰浮动布局的空间分配，也容易触发换行 - DOM 顺序被强制绑定（比如 float 要求左→右→中），而语义化要求通常是主内容优先，Flex 的
order属性却能天然解决
响应式下等高还能保持吗？关键看 flex-direction 切换
小屏改成单列时，如果只是简单把 display: flex 改成 flex-direction: column，三栏会垂直堆叠，但“等高”失去意义——此时应让每栏恢复为内容自适应高度。
- 切方向前，先重置子项的
flex行为：.column { flex: none; width: 100%; } - 避免在媒体查询里写
flex: 1，否则窄屏下仍强行拉伸，导致空白或滚动条 - 如果仍需视觉对齐（比如卡片列表），改用
display: grid并配grid-auto-rows: minmax(min-content, max-content) - 全局必须加
* { box-sizing: border-box; }，否则padding和border会让实际宽度超出预期，破坏等高对齐
真正容易被忽略的点是：等高不是靠“拉”出来的，而是靠“容器约束+子项不抵抗”实现的。一旦某个子项写了 height、min-height、align-self 或用了 position: absolute，等高就断了——这不是 bug，是布局逻辑的必然结果。
