float多列默认不等高，因浮动使父容器高度坍缩，各列高度由内容独立决定；所谓等高是背景色延伸的视觉错觉，并非真实DOM高度一致。
float 多列布局为什么默认不等高
因为浮动元素脱离文档流后，父容器高度会坍缩成 0（除非清除浮动），各列实际高度由自身内容决定，彼此完全独立。所谓“等高”只是视觉错觉——你看到的其实是背景色或边框延伸造成的假象，不是真实 DOM 高度一致。
常见错误现象：float: left 两列，左列内容少、右列内容多，但父容器没设高度，结果右列底部内容溢出到左列下方；或者加了 overflow: hidden 清浮动，却误以为这时两列“自动等高”了——其实只是父容器包裹住了，列本身高度依然不一致。
用负 margin + 父容器隐藏实现视觉等高
核心思路是让每列都假装自己无限高：通过极大正内边距（如 padding-bottom: 9999px）向下撑开，再用同样大的负外边距（margin-bottom: -9999px）把它拉回来，最后父容器用 overflow: hidden 把溢出部分裁掉。这样所有列在视觉上就“被拉齐”到了最高列的高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
overflow: hidden或overflow: auto（不能是visible），否则负 margin 溢出部分会显示出来 - 所有浮动列都要统一设置相同的
padding-bottom和margin-bottom值，且数值要大于页面可能出现的最大内容高度 - 必须给父容器加
padding-bottom（比如padding-bottom: 1px），否则最后一行内容可能被overflow: hidden切掉 - 不要在浮动列里用
height: 100%，它不会生效——浮动元素的百分比高度依赖父容器显式高度，而这里父容器高度是靠 hack 推出来的
示例片段：
.container { overflow: hidden; padding-bottom: 1px; }
.column { float: left; width: 50%; padding-bottom: 9999px; margin-bottom: -9999px; }
IE6/7 下的兼容性补丁
老版本 IE 对负 margin 的解析更脆弱，容易触发双倍边距 bug 或布局错乱。如果还要支持 IE6–7，得额外加两条规则：
- 给浮动列加
display: inline（修复 IE6 双倍 margin） - 给父容器加
zoom: 1（触发 hasLayout，确保overflow: hidden生效）
注意：这些补丁只在真正需要兼容旧 IE 时才加，现代项目基本可忽略。但如果你接手的是遗留系统，漏掉 zoom: 1 就会导致整个布局塌陷——这点很容易被忽略。
比 float 更靠谱的替代方案
这个 hack 虽然能用，但本质是绕过标准行为的修补，维护成本高、语义差、响应式难适配。现在主流做法是直接换技术栈：
- 用
display: flex，父容器设display: flex，子项天然等高，无需任何 hack - 用
display: grid，grid-template-columns定义列，行高自动对齐 - 连 CSS3 都不能用？那至少用
table-cell（设display: table-cell），比 float 更稳定，兼容性也更好
float 等高布局现在基本只出现在面试题或老项目维护场景里。真要动手写，得先确认浏览器目标和团队规范——别为了“会用”硬套一个已经过时的解法。
负 margin 的数值、父容器的 overflow 和 padding-bottom 这三处，任意一个没对齐，整个布局就失效。它看起来像技巧，实则是三处细节咬合的结果。
