float元素无法真正等高，因其脱离文档流导致父容器无法感知子项实际高度；左列短、右列长时底边自然错位，height:100%无效；现代应使用display:flex（align-items:stretch）实现真实等高。
做不到。float 元素天然不等高，所谓“等高并列”只是视觉错觉，且在现代项目中不应再用 float 做布局。
为什么 float 元素无法真正等高
浮动元素脱离文档流，父容器完全感知不到它们的实际高度。左列内容少、右列内容多时，右列底部自然下垂，两列底边根本不在同一水平线——这不是 bug，是 float 的设计机制决定的。
-
height: 100%在浮动子项里基本无效（父容器高度常为 0） - 清除浮动（如
::after { clear: both }）只解决父容器塌陷，不干预子项高度计算 - 任何“看起来等高”的方案，都绕不开背景延伸、负 margin 或 JS 补偿，都不是真实 DOM 高度同步
常见“伪等高”方案及翻车点
如果你仍需在遗留项目中硬套 float，最常被复制的写法是 padding-bottom: 9999px; margin-bottom: -9999px; overflow: hidden，但它问题密集：
- 所有浮动子项必须设**完全相同**的
padding-bottom和margin-bottom，漏一个就露底 -
border-bottom或box-shadow画在真实内容区，会被overflow: hidden切掉 - 子项内有
position: relative元素时，它的bottom偏移基准仍是原始高度，不是“视觉高度” - 响应式断点里只改
float: none，却忘了重置padding-bottom，单列时高度异常塌陷
真正该用什么替代 float
现代浏览器（Chrome 29+/Firefox 28+/Safari 6.1+）已全面支持 display: flex，它才是语义正确、行为可预测的解法：
- 父容器设
display: flex，子项默认align-items: stretch，自动等高 - 子项别写
height、max-height或align-self: flex-start，否则拉伸立即失效 - 若需兼容 IE10–11，加
flex: 1 1 auto比单纯flex: 1更稳 - 不要混用
float和flex：一旦子项还挂着float: left，flex 容器就放弃拉伸逻辑
复杂点在于：等高不是子项自己的事，而是容器级行为；只要你在子项里写了 height、align-self，或混用了 float、position: absolute，拉伸就立刻失效——这点比怎么写更关键，也最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
