真正能靠纯CSS实现可靠等高的方案只有display: flex和display: grid；浮动方案本质是用padding-bottom与margin-bottom抵消制造视觉假象，依赖overflow: hidden裁剪，并非真等高。
浮动本身不提供等高能力，所谓“等高”全是视觉 trick。真正能靠纯 CSS 实现可靠等高的方案只有 display: flex 和 display: grid；浮动方案本质是用 padding-bottom + margin-bottom 抵消制造拉伸假象，依赖父容器 overflow: hidden 裁剪，不是真等高。
为什么 float + padding/margin 能“看起来”等高
核心是让每列都向下撑开一个极大值（比如 padding-bottom: 9999px），再用同样大的负外边距（margin-bottom: -9999px）把它拽回原位，最后靠父容器的 overflow: hidden 把溢出部分切掉——所有列底部都被拉到同一水平线，形成等高错觉。
- 这个“高度”不是由内容决定的，而是由最高列的内容撑出来的容器高度 + 这个巨大 padding 共同决定的
- 如果最高列内容很短，整个布局会显得空荡；如果某列内部有
height: 100%，它不会生效——浮动元素的百分比高度无参照 - 必须给父容器加
padding-bottom: 1px，否则最后一行文字可能被overflow: hidden切掉
伪等高法在现代项目中容易踩的坑
这套方法在 IE6–7 时代流行，但今天继续用它，多数问题来自“忘了它只是视觉欺骗”：
-
border、box-shadow或背景图无法自然延伸到“伪高度”区域，常出现边框断开或阴影缺失 - 列之间如果有
gap或margin，负 margin 可能干扰相邻元素定位 - 响应式断点里列宽变化时，若没同步重设
float和清除逻辑，布局容易塌陷 - 配合 JavaScript 动态增删内容后，需要手动触发重排（
offsetHeight读取等），否则视觉错位
background-image 平铺模拟等高列的局限性
用左右不同色的 linear-gradient 作为父容器背景，再让各列用白色覆盖局部，确实能营造“分栏等高”的观感：
- 只适用于纯色背景或简单渐变；一旦要加纹理、图片或透明度，就很难对齐边缘
- 列数增加时，渐变色标位置需精确计算（如三列就得写
33.33%, 33.33%, 66.66%, 66.66%），维护成本陡增 - 无法解决列内内容垂直居中、滚动区域适配等真实交互需求
- 遇到
mix-blend-mode或 backdrop-filter 场景，背景叠加行为不可控
真正需要等高列时，flex 的 align-items: stretch（默认行为）和 grid 的 grid-template-rows: 1fr 是唯二无需 hack、语义清晰、可预测的方案。浮动+伪等高只适合遗留系统维护或极简静态页——而且得随时提醒自己：它没在等高，只是看起来像。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
