浮动多列等高塌陷源于浮动元素脱离文档流导致父容器无法感知高度；padding-bottom与margin-bottom成对反向补偿是IE7+下唯一稳定实现视觉等高的纯CSS方案。
浮动多列等高为什么总是塌陷
因为浮动元素脱离文档流，父容器无法感知子项高度，自然就塌成一条线。常见表现是背景色只显示几像素高，或者下层内容直接顶上来——这不是 CSS 写错了，是浮动本身的机制决定的。
单纯给父容器加 overflow: hidden 或 clear: both 只能触发 BFC 清除浮动，但解决不了“视觉上等高”这个需求：三列里一列只有 2 行文字，另外两列有 5 张图，你希望它们底部对齐，而不是各自按内容撑开。
- 用
display: table-cell能等高，但语义错乱、响应式难做、IE8– 不支持 - Flexbox 是正解，但老项目要兼容 IE10– 就得绕路
-
padding-bottom+margin-bottom补偿法，是唯一能在纯浮动+IE7+场景下稳定模拟等高的手段
padding补偿法的核心原理
本质是“用看不见的 padding 把短列拉长，再用负 margin 把多余空间藏起来”，让所有列在视觉上底部对齐，同时不破坏布局流。
关键不是加多少 padding，而是 padding 和 margin 必须成对、反向、数值相同。比如：
column {
padding-bottom: 9999px;
margin-bottom: -9999px;
}
这样列内部内容还是按实际高度渲染，但外在高度被拉到 9999px，再被 margin 拉回原位——而父容器因为包裹了这些“假高度”，就能正确撑开并显示统一底边。
- 数值选 9999px 是经验值，必须大于页面可能出现的最大列高
- 不能用
em或rem，否则缩放时易失效 - 必须给所有浮动子列同时加，缺一个就会导致父容器再次塌陷
配合 min-height 实现真正的“至少等高”
仅靠 padding 补偿只能让列“看起来一样高”，但如果某列内容真的超长（比如加载了大量动态数据），它还是会继续往下撑，破坏对齐。这时候需要 min-height 锚定底线。
做法是：先预估一个合理最小高度（比如 400px），设为所有列的 min-height；再叠加 padding/margin 补偿。这样短列会被拉到 400px，长列则自由延伸，视觉上仍保持底部对齐，且不遮挡内容。
- 不要把
min-height设得过大，否则小屏幕会强制出现滚动条 - 如果列内有图片或 iframe，记得设置
max-width: 100%防止撑破容器 - IE6 不支持
min-height，需用_heighthack 替代（仅当真要支持时才加）
为什么伪元素清除法不能替代 padding 补偿
很多人试过用 ::after 清除浮动，比如：
.container::after {
content: "";
display: table;
clear: both;
}
这确实能让父容器包含所有浮动子项，但它只解决“塌陷”，不解决“等高”。三列依然按各自内容高度排列，顶部对齐、底部参差——和没加之前只是多了个背景色而已。
padding 补偿是唯一能欺骗浏览器“所有列都有一样深的脚”的方式。它的代价是 DOM 层级不变、无 JS 依赖、兼容性拉满，但代价也很实在：调试时 inspect 元素会看到一堆“不合理”的 padding 值，初看容易懵。
真正容易被忽略的点是：一旦列中用了 position: relative 或 transform，padding 补偿的视觉对齐可能偏移几个像素——这时候得在补偿值上微调，比如改成 9998px 或加 1px 的 border-bottom 平衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
