浮动无法实现真正等高列，仅靠padding/margin制造视觉错觉；display:table-cell可真等高但不响应式；现代项目应直接使用flex或grid实现语义化真等高。
浮动元素本身无法实现真正的等高列效果——它不提供高度同步机制，所有“等高”都是视觉欺骗，且现代项目中不应再用 float 做多列布局。
为什么 float + padding-bottom/margin-bottom 只是视觉错觉
这套方案靠的是大值 padding-bottom: 9999px 和对应负 margin-bottom: -9999px 把每列底部强行拉到底部，再用父容器的 overflow: hidden 切掉溢出部分。结果是：所有列“看起来”一样高，但实际内容高度没变，子元素里的 height: 100% 会失效，border 和 box-shadow 也只画到真实内容高度，不会延伸到“伪高度”区域。
- 最高列内容决定容器总高度，其余列只是被“垫高”了背景和 padding 区域
- 如果某列有
position: relative或z-index，负 margin 可能导致层叠错乱 - 响应式断点切换列数时，必须同步重设
float、width和清除逻辑，否则塌陷
display: table-cell 是唯一能靠 float 外方式实现真等高的旧方案
虽然不依赖 float，但它常被混用于“浮动替代方案”场景：父容器设 display: table，子项设 display: table-cell，天然等高，无需 JS、无视觉 hack。
- 子项高度由最高列内容驱动，
height: 100%在子项内可正常工作（前提是父级table有明确高度或由内容撑开） - 不支持
margin，间距得靠padding或外层 wrapper - IE8+ 全兼容，但 IE9 及以下不支持
flex，这是它最后的实用价值 - 无法响应式换行——
table-cell永远横向排列，小屏必须配合媒体查询切为display: block
真正需要等高列时，别绕弯子
如果你正在写新项目，或者目标浏览器支持 IE10+，直接用 display: flex；支持 IE11+ 且需二维控制，上 display: grid。它们的 align-items: stretch（默认）和 grid-template-rows: 1fr 是语义清晰、可预测、无需清除、不干扰定位的真等高机制。
立即学习“前端免费学习笔记（深入）”；
-
float的原始语义是文字环绕图片，不是布局工具——2015 年后所有主流浏览器都已原生支持flex和grid - 硬套浮动等高，90% 的问题来自忘了它只是假象：比如加了
border-bottom发现只在短列底部出现，或用backdrop-filter后背景叠加异常 - 遗留系统维护除外，否则花时间调
padding-bottom数值、修清除逻辑、适配 media query，不如十分钟改用flex
复杂点在于：等高不是子元素自己的事，而是容器级行为；一旦你在子项里写了 height、align-self: flex-start 或混用 vertical-align，拉伸就立刻失效——这点比写法本身更易被忽略。
