浮动元素天然不等高，所谓“等高”是通过padding-bottom、margin-bottom和overflow:hidden配合实现的视觉错觉；核心原理是用大正内边距撑开再用等值负外边距拉回，父容器裁剪溢出；现代应优先使用flex或grid布局。
浮动元素之间不可能真正等高——这是浏览器渲染机制决定的，不是代码写得不够好。所谓“等高效果”，全是视觉 trick，靠的是 padding-bottom、margin-bottom 和 overflow: hidden 配合完成的错觉。
为什么 float 元素天然不等高
浮动元素脱离文档流，父容器根本不知道它们有多高。左栏内容少、右栏内容多时，右栏底部自然下垂，左栏“悬空”在上面——这完全正常，不是 bug。你加十遍 float: left，也改不了这个事实。height: 100% 在这种上下文里基本无效，因为父容器高度就是 0；clear: both 只解决塌陷，不拉齐底部。
padding-bottom + margin-bottom 怎么“骗”浏览器
核心是三步：先用极大正内边距把每列往下撑，再用同样大的负外边距把它拽回来，最后靠父容器裁掉溢出部分。所有列底部被“拉”到同一水平线，形成等高错觉。
-
padding-bottom必须设一个固定大值（比如9999px），且要 ≥ 最高列的实际内容高度，否则矮列会露底 -
margin-bottom必须为负，且绝对值等于padding-bottom（如-9999px），否则父容器会被撑开 - 父容器必须声明
overflow: hidden（或auto），否则溢出会显示出来 - 所有浮动子项都要统一加这套规则，不能只加部分
- 父容器最好加
padding-bottom: 1px，否则最后一行文字可能被overflow: hidden切掉
IE6/7 兼容性补丁容易漏掉的关键点
老版本 IE 对负 margin 渲染不稳定，尤其父容器没触发 layout 时，margin-bottom: -9999px 可能失效或导致文字重叠。这时候必须加：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
zoom: 1（最轻量，推荐） - 或给浮动子项加
display: inline（修复 IE6 双倍 margin）
现代项目基本可跳过，但接手遗留系统时，漏掉 zoom: 1 就会导致整个布局塌陷——这点比写法本身更易被忽略。
border、box-shadow、height: 100% 为什么失效
这个 trick 只拉伸了背景和 padding 区域，不改变真实 DOM 高度。所以：
-
border-bottom只画到真实内容高度，不会延伸到“伪高度”区域，常出现断开 -
box-shadow同样只覆盖真实内容区，矮列阴影明显短一截 - 列内写
height: 100%会失效——浮动元素的百分比高度无参照基准 - 如果某列有
position: relative或z-index，负 margin 可能引发层叠错乱
真正需要等高，display: flex 的 align-items: stretch（默认行为）或 display: grid 的 grid-template-rows: 1fr 是唯二无需 hack、语义清晰、可预测的方案。复杂点在于：等高是容器级行为，一旦你在子项里写了 height、align-self: flex-start 或混用 vertical-align，拉伸就立刻失效——这点比怎么写更关键。
