flexbox是当前唯一可靠、语义清晰、无需hack的等高列实现方式；伪类仅能清除浮动或制造视觉欺骗，无法真正拉伸子元素高度，因伪元素不参与文档流高度计算且无拉伸能力。
Flexbox 是当前唯一可靠、语义清晰、无需 hack 的等高列实现方式；伪类（如 ::before/::after）本身不解决等高问题，只能配合 float 做清除或视觉欺骗，已无实用价值。
为什么伪类 + float 不能真正实现等高
所谓“用伪类实现等高”，实际是误传。伪类本身不参与高度计算，也不能拉伸容器。常见错误做法是：给父容器加 ::after 清除浮动（clear: both），以为这样就能“撑开高度”——但只是让父容器包裹住浮动子项，各列 DOM 高度依然不同，内容多的列仍会把旁边列“顶下去”。
常见错误现象包括：
- 右侧列内容多时，底部内容被左侧浮动元素遮盖（
float脱离文档流） - 父容器高度塌陷，即使加了
::after清除，也无法让短列自动拉伸到与长列同高 - 用
overflow: hidden强制包裹，会导致内部position: absolute元素定位异常
display: flex 等高失效的三个真实原因
加了 display: flex 却还是不等高，不是 Flex 不行，而是没满足它的前提条件。关键判断点是：父容器在交叉轴（默认垂直方向）是否有可参照的高度边界。
- 父容器
height是auto且未被上级限制 → 子项无高度可拉伸，computed height 显示为0px或auto - 子项显式写了
height: 100%，但父容器没设显式高度 → 浏览器无法计算百分比基准，直接忽略 - 父容器设置了
align-items: flex-start或flex-end→ 关闭了默认的stretch行为；应删掉或显式写align-items: stretch
Flex 与 Grid 在等高场景下的分工边界
别把 Flex 当万能胶。它适合单行多列、内容驱动、需响应式换行的场景；Grid 才是处理“多行+每行内等高+列间对齐”的正解。
- 需要两列并排、内容长度不一但高度一致 → 用
display: flex，一行搞定 - 需要三行六列卡片网格，且每行所有卡片高度相同、跨行内容也对齐 → 必须用
display: grid，配grid-auto-rows: 1fr或minmax(0, 1fr) - IE11 兼容需求强？避免依赖
align-items: stretch的隐式行为，子项改写flex: 1 0 auto - Safari ≤15.4 对
grid-auto-rows: 1fr支持有 bug，降级用minmax(0, 1fr)
真正容易被忽略的点是：等高 ≠ 内容底部对齐。Flex/Grid 只保证容器高度一致，子项内部文字、图片默认仍按文档流排列。若要底部对齐，得在子项内部再套一层 display: flex; flex-direction: column; justify-content: flex-end ——这个嵌套层级，才是多数人调试半天没结果的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
