浮动元素底部不齐是正常行为，伪等高需用padding-bottom+负margin-bottom配合overflow:hidden裁剪实现，ie6/7需zoom:1触发haslayout，现代项目应优先使用flex或grid。
浮动元素高度不一致时，内容区域底部对不齐
浮动布局里，float: left 的多个盒子如果内容高度不同，底部自然参差不齐——这不是 bug，是浮动的正常行为。想让视觉上“等高”，不能真让 height 一样（会截断或撑开），得用视觉欺骗：靠 padding-bottom 拉长内容区，再用 margin-bottom 负值抵消，把父容器的 overflow: hidden 当作裁剪边界。
padding-bottom + margin-bottom 配合 overflow:hidden 的原理
核心是利用父容器的 overflow: hidden 把多出来的 padding-bottom “藏”掉，同时靠负 margin-bottom 把相邻浮动元素拉回同一基线。这个技巧本质是制造“伪等高”，不影响文档流其他部分。
-
padding-bottom必须设一个足够大的固定值（比如9999px），确保最矮的盒子也能被拉到和其他盒子视觉齐平 -
margin-bottom必须为负，且绝对值等于padding-bottom（如-9999px），否则父容器会被撑开 - 父容器必须有
overflow: hidden（或auto），否则溢出的 padding 会显示出来 - 所有浮动子元素都要加这一套，不能只加部分
IE6/7 下负 margin 可能错位，需要触发 hasLayout
老版本 IE 对负外边距渲染不稳定，尤其当父容器没触发 layout 时，margin-bottom: -9999px 可能失效或导致文字重叠。这时候得补上 zoom: 1 或 height: 1% 来强制触发。
- 在父容器上加
zoom: 1是最轻量的兼容写法 - 不要用
display: inline-block替代浮动，那会引入新的换行和间隙问题 - 如果项目已放弃 IE6–7，这步可跳过；但只要还支持，就必须加
现代项目里更推荐用 flex 或 grid 替代这种 hack
这套方案本质是 hack，维护成本高、语义弱、响应式下容易崩。真正需要等高，display: flex 的 align-items: stretch 是默认行为，display: grid 的 grid-template-rows: 1fr 更直接。
立即学习“前端免费学习笔记（深入）”；
- 如果必须兼容 IE9 及以下，才考虑 padding/margin 方案
- Flex 在 IE10+ 支持良好，加
-ms-前缀即可覆盖大部分旧需求 - 用
float还硬套 padding/margin，等于主动给自己埋重构债
真要模拟等高，关键是理解「谁裁剪、谁拉伸、谁抵消」——三个动作缺一不可，少一个就会漏底或者撑破容器。
