float元素无法真正等高，因脱离文档流导致父容器无法感知高度；所谓等高是通过padding-bottom撑背景、margin-bottom负值回拉、overflow:hidden裁剪实现的视觉欺骗，现代项目应改用flex或grid布局。
float 元素根本做不到真等高
别折腾了——float 本身不参与高度同步，父容器对子项高度“视而不见”，左列内容少、右列内容多时，底边错位是标准行为，不是你代码写错了。所谓“等高”，全是视觉欺骗，靠 padding-bottom 撑背景、margin-bottom 往回拽、overflow: hidden 裁掉溢出，三者缺一不可。
padding-bottom + margin-bottom 的实操要点
这套 trick 表面简单，但参数稍有偏差就露馅：
-
padding-bottom必须设成一个固定大值（比如9999px），且要 ≥ 页面中最高列的实际内容高度，否则矮列底部会露出空白 -
margin-bottom必须为负，且绝对值与padding-bottom完全一致（如-9999px），否则父容器会被撑开或错位 - 所有浮动子项都必须统一加这两条规则，漏一个，那一列就塌下去
- 父容器必须声明
overflow: hidden（或auto），否则溢出会直接破坏布局 - IE6/7 需额外给父容器加
zoom: 1触发 hasLayout，否则负 margin 可能失效或文字重叠
哪些样式会在这个 trick 下失效
它只拉伸了背景和 padding 区域，真实 DOM 高度没变，所以很多常见需求会翻车：
-
border-bottom或box-shadow只画在真实内容区，不会延伸到“伪高度”区域，矮列看起来边框断开、阴影变短 - 子项里写了
height: 100%，基本无效——浮动元素没有高度参照基准 - 列内有
position: relative+bottom: 10px的元素，它的偏移起点仍是原始高度，不是“视觉高度”，容易错位 - 响应式断点里只改
float: none，却忘了重置padding-bottom和margin-bottom，单列时要么高度异常塌陷，要么页面被撑出巨大空白
真正该用什么替代 float
如果你的项目支持 IE10+（2026 年绝大多数场景都满足），直接上 display: flex：
- 父容器加
display: flex，子项默认align-items: stretch，自动等高 - 别在子项里写
height、max-height或align-self: flex-start，否则拉伸立即失效 - 子项一旦还挂着
float: left，flex 容器就放弃拉伸逻辑——混用是最大雷区
复杂点在于：等高不是子项自己的事，而是容器级行为；只要你在子项里写了 height、align-self，或混用了 float、position: absolute，拉伸就立刻失效——这点比怎么写更关键，也最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
