float无法天然等高，因浮动元素脱离文档流，父容器无法感知其高度，各列仅按自身内容撑高；所谓等高是通过padding-bottom与margin-bottom配合overflow:hidden实现的视觉欺骗，并非真实dom高度一致。
为什么 float 无法天然等高
浮动元素脱离文档流，父容器“看不见”它们的高度，各列按自身内容撑开，高度自然不一致。这不是 bug，是 float 的设计行为。当左栏内容多、右栏内容少时，右栏视觉上会“悬空”在左栏下方，而不是顶部对齐——哪怕你写了 float: left 和 float: right，也改变不了这个事实。
padding-bottom + margin-bottom 是怎么骗过眼睛的
核心不是真让元素变高，而是用超大 padding-bottom 把背景色往下拉满，再用等值负 margin-bottom 把实际布局位置拉回来，最后靠父容器的 overflow: hidden 裁掉多余部分。视觉上两列背景都“到底”，就显得等高了。
- 所有浮动列必须设置相同的
padding-bottom: 9999px（或更大，如100000px） - 对应设置
margin-bottom: -9999px，否则页面会被撑出巨大空白 - 父容器必须声明
overflow: hidden（触发 BFC，同时裁剪溢出） - 每列仍需明确
float: left（或float: right），且不能遗漏清除逻辑
常见翻车点：颜色块错位、边框断开、响应式失效
这个技巧只“模拟”等高，对真实布局结构没影响，所以很多样式会暴露破绽：
- 如果列有
border-bottom或box-shadow，它会出现在 padding 区域里，被overflow: hidden切掉——结果就是底部边框消失 - 当列内有相对定位元素（如
position: relative+bottom: 10px），它的计算基准仍是原始高度，不是“视觉高度”，容易偏移 - 媒体查询中改单栏时，若只写
float: none，但忘了重置padding-bottom和margin-bottom，会导致高度异常塌陷或溢出 - IE8 及更早版本对超大数值支持不稳定，
9999px在某些场景下会被截断，建议降为2000px并配合足够大的min-height
比“骗”更靠谱的替代方案有哪些
如果你只是需要等高颜色块，且目标浏览器支持现代 CSS，优先考虑这些：
-
display: flex+align-items: stretch：父容器加display: flex，子列自动等高，无需 hack，响应式友好 -
display: table-cell：父容器display: table，子列display: table-cell，天然等高，兼容性到 IE8，但不支持flex-wrap或复杂响应式 - 伪元素占位法：用
::before或::after在父容器内生成绝对定位的色块，高度取最大列，但需 JS 辅助测高（仅限必须支持老浏览器的极端场景）
真正难的不是写出 padding-bottom: 9999px，而是意识到它只解决“看起来一样高”，而一旦加边框、阴影、动画或需要 JS 获取真实高度，这套逻辑就会立刻露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
