float两列无法真正等高，因浮动元素脱离文档流致父容器无法感知高度；padding-bottom+margin-bottom+overflow:hidden是兼容旧浏览器的视觉欺骗方案，但需严格满足条件；现代浏览器推荐用flex或table-cell实现真正等高。
纯 float 布局无法真正实现两列等高，所谓“等高”只是视觉欺骗——DOM 高度依然不一致，所有方案都绕不开这个前提。如果必须用 float，padding-bottom + margin-bottom + overflow: hidden 是目前最可控的旧浏览器兼容方案，但需严格满足多个条件才能不出错。
为什么 float 两列默认高度不一致
浮动元素脱离文档流，父容器无法感知子项高度，各列仅按自身内容撑开。这不是 bug，是 float 的原始设计行为。你看到的“左列短、右列长却顶部对齐”，只是因为它们都 float: left 并排了，不是被拉齐了——底部永远不对齐，除非手动干预。
padding-bottom + margin-bottom 的实操要点
这个 trick 的核心是“向下撑、向上拉、向外裁”，不是真改高度，而是骗眼睛。容易翻车的地方远多于写法本身：
- 所有浮动列必须统一设置
padding-bottom: 9999px和margin-bottom: -9999px；数值太小（如1000px）在长内容下会露底，太大（如100000px）在 IE8 下可能截断，建议用2000px+min-height: 300px组合 - 父容器必须设
overflow: hidden（触发 BFC），且额外加padding-bottom: 1px，否则最后一行文字可能被裁掉 - 列内若有
border-bottom或box-shadow，会被overflow: hidden切掉——底部边框消失是常态，不是你写错了 - 列里用了
position: relative，它的top/bottom计算基准仍是原始高度，不是“视觉高度”，位置容易偏移
比 float 更稳妥的替代路径
如果你的目标浏览器支持现代 CSS（Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+），直接放弃 float：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex：父容器加display: flex+align-items: stretch，子列自动等高，无需 hack，响应式天然友好 - 用
display: table-cell：兼容到 IE8，父容器display: table，子列display: table-cell，等高是表格单元格的原生行为 - 避免
position: absolute模拟：它要求父容器有明确height，内容超长就溢出或裁切，不是自适应方案
真正难的不是把 padding-bottom: 9999px 写出来，而是判断当前项目是否还值得为 float 等高投入维护成本——多数时候，换 flex 就解决了，而且不会在媒体查询里突然塌陷。
