浮动元素天然不等高，因其脱离文档流导致父容器无法感知高度；所谓“等高”是通过padding-bottom拉伸背景、margin-bottom负值回拉、overflow:hidden裁剪实现的视觉欺骗，并非真实dom等高。
浮动元素本身不可能等高，所谓“等高”只是视觉欺骗——靠 padding-bottom 拉长背景，用 margin-bottom 把布局位置拉回来，再靠父容器 overflow: hidden 裁掉多余部分。这招只在纯 float 布局中偶然有效，现代项目里硬套它，等于主动给自己加维护负担。
为什么 float 元素天然不等高
浮动元素脱离文档流，父容器完全感知不到它们的高度。左栏内容多、右栏内容少时，右栏就真的“悬在半空”，底部对不齐是正常行为，不是 bug。你写 float: left 十遍，也改变不了这个事实。
- 浏览器不会为浮动子项自动计算一个“最大高度”作为父容器基准
-
height: 100%在浮动上下文中基本无效，因为父容器高度本身就是 0 - 清除浮动（如
clear: both）只解决塌陷，不解决等高
padding-bottom + margin-bottom 怎么“骗”过浏览器
关键不是真让元素变高，而是利用盒模型渲染顺序：先按 content + padding 算高度，再用 margin 做位移。所以 padding-bottom: 9999px 把背景色往下撑满，margin-bottom: -9999px 把元素视觉上提回原位，最后靠父容器 overflow: hidden 把溢出部分切掉。
- 所有浮动子项必须设相同的
padding-bottom和margin-bottom，不能只加部分 -
padding-bottom值必须 ≥ 最高列的实际内容高度，否则矮列仍会露底 - 父容器必须声明
overflow: hidden（或auto），否则溢出会撑破布局 - IE6/7 需额外加
zoom: 1触发 hasLayout，否则负 margin 可能错位或失效
哪些地方最容易翻车
这个技巧表面简单，实则处处是坑。很多问题不是代码写错了，而是没意识到它只影响“视觉高度”，不改变真实 DOM 结构和定位逻辑。
-
border-bottom或box-shadow会出现在 padding 区域，被overflow: hidden切掉，结果边框消失 - 列内有
position: relative+bottom: 10px的元素，它的偏移基准仍是原始高度，不是“视觉高度”，容易错位 - 响应式断点里只改
float: none，却忘了重置padding-bottom和margin-bottom，导致单列时高度异常塌陷或溢出 - 列宽总和超过 100%（比如用了
box-sizing: content-box+ 边框），叠加大 padding 后更易换行
比“骗”更靠谱的替代方案
如果你只是需要等高颜色块或卡片组，且目标浏览器支持 IE10+，直接用 display: flex 是最干净的选择：align-items: stretch 是默认行为，无需 hack，响应式友好，语义清晰。
-
display: table-cell天然等高，兼容到 IE8，但语义偏离、无法 flex-wrap、响应式受限 - Grid 布局（
grid-template-rows: 1fr）更直接，但 IE 不支持 - 伪元素占位法需 JS 测高，仅限极端兼容需求，日常开发别碰
真正难的不是写出 padding-bottom: 9999px，而是意识到它只解决“看起来一样高”，对垂直居中、边框、阴影、定位基准这些事一概不管——那些都得另起炉灶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
