浮动多列等高布局本质是视觉错觉，非真实等高；其原理为padding-bottom撑开背景、margin-bottom负值回拉、overflow:hidden裁剪溢出，仅适用于维护旧项目，现代应优先使用flex或grid。
浮动多列等高布局根本不存在“真等高”，所有实现都是视觉错觉；如果你必须用 float（比如维护老项目），padding-bottom + margin-bottom + overflow: hidden 是唯一可行路径，但代价是 border、box-shadow、height 百分比全部失效。
为什么 float 元素天然不等高
浮动元素脱离文档流，父容器完全无法感知其高度。左栏只有两行文字，右栏有十段内容，父容器高度就是 0 —— 这不是 bug，是 float 的设计机制。你加 clear: both 只能防止后续元素错位，解决不了高度同步问题。height: 100% 在这种上下文里毫无意义，因为没有参照高度。
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、max-height、align-self 或混用 vertical-align，拉伸就立刻失效——这点比怎么写更关键，也最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
