浮动容器内无法真正实现等高列，唯一靠谱做法是删掉所有float和clear，将父容器改为display: flex；因float元素脱离文档流，伪元素清除仅包裹子项而不统一高度，flex通过align-items: stretch默认拉伸子项等高。
直接说结论：浮动容器内无法真正实现等高列，强行“模拟”只会导致错位、遮盖、响应式断裂；唯一靠谱的做法是删掉所有 float 和 clear，把父容器改成 display: flex。
为什么 float 容器里加 ::after 清除也做不到等高
常见错误是给浮动父容器加 ::after { content: ""; display: table; clear: both; }，以为这样就能“撑开高度”。但实际只是让父容器包裹住浮动子项，各列 DOM 高度依然独立计算——右侧列内容多时，底部文字会被左侧浮动元素视觉遮盖；左侧列短，右侧列长，两列底部根本不对齐。
关键点在于：float 元素脱离文档流，父容器高度由“未浮动的最后元素”或 clear 位置决定，和子项真实高度无关。伪元素不参与高度拉伸，只负责清除，不能当“等高胶水”用。
display: flex 替换 float 的三步实操
不用重写 HTML 结构，只需改 CSS：
立即学习“前端免费学习笔记（深入）”；
- 删掉所有子元素上的
float: left、float: right、clear、以及为模拟间距写的margin-right/margin-left - 给原浮动父容器加
display: flex（不是inline-flex，除非你真要行内布局） - 用
gap替代旧式 margin 间隙；需要换行就加flex-wrap: wrap；对齐方式用justify-content（主轴）和align-items: stretch（交叉轴，默认即等高）
示例对比：
.old-float-container {
/* 原来可能有 */
}
.old-float-container::after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 300px;
margin-right: 20px;
}
<p>/<em> → 改成 </em>/
.flex-container {
display: flex;
gap: 20px;
}
.col {
flex: 1 1 300px; /<em> 可伸缩、最小300px </em>/
}Flex 等高失效的三个真实原因
写了 display: flex 却还是不等高，通常卡在这三点：
- 父容器
height是auto，且上级没限制高度 → 子项无参照高度可拉伸，computed height 显示为auto或0px - 子项写了
height: 100%，但父容器没设显式高度 → 百分比无基准，浏览器直接忽略 - 父容器设置了
align-items: flex-start或align-items: flex-end→ 关闭了默认的stretch行为；应删掉该声明，或显式写align-items: stretch
注意：IE11 对隐式 align-items: stretch 支持不稳定，如需兼容，建议子项直接写 flex: 1 或显式声明 align-items。
等高 ≠ 内容底部对齐，这个嵌套层级最容易被忽略
Flex 让所有列容器高度一致，但列内部的文字、图片、按钮仍按文档流排列——顶部对齐是默认行为，底部对齐得额外处理。
若要每列底部的按钮或文字对齐，必须在每个 .col 内部再套一层容器，并设 display: flex; flex-direction: column; justify-content: space-between 或 margin-top: auto 推到底部。
这个二级嵌套，才是调试半天没结果的真正根源。别只盯着父容器的 display: flex，子项内部的对齐逻辑一样关键。
