浮动布局无法实现真等高，float+padding-bottom/margin-bottom是通过极大正内边距撑开、负外边距回拉、overflow:hidden裁剪制造视觉错觉；display:table-cell可真等高但不响应式；现代项目应直接用flex或grid实现语义化真等高。
浮动布局本身无法实现真正的多列等高——它不参与高度同步，所有“等高”都是视觉错觉，且现代项目中不应再用 float 做布局。
float + padding-bottom/margin-bottom 是什么原理？
这不是真等高，而是用极大正内边距把每列向下撑开，再用相同数值的负外边距把它拽回原位，最后靠父容器 overflow: hidden 把溢出部分裁掉。所有列底部被拉到同一水平线，形成“看起来一样高”的错觉。
- 最高列内容决定容器总高度，其余列只是背景和
padding-bottom区域被拉长 -
height: 100%在浮动子项里完全失效（无参照高度） -
border、box-shadow只画到真实内容高度，不会延伸到“伪高度”区域 - 若某列有
position: relative或z-index，负 margin 可能导致层叠异常
display: table-cell 能否替代 float 实现真等高？
可以，且是唯一无需 JS、不依赖 hack 的纯 CSS 真等高方案（IE8+ 全兼容），但它不是 float 的变体，而是独立布局模型。
- 父容器设
display: table，子项设display: table-cell，天然等高 -
height: 100%在子项内可正常工作（前提是父级有明确高度或由内容撑开） - 不支持响应式换行——小屏必须配合媒体查询切为
display: block - 无法使用
colspan，vertical-align是主要对齐手段，但不支持 flex 那样的align-items
为什么现代项目应直接用 flex 或 grid？
因为它们从语义和机制上就支持等高：flex 的 align-items: stretch（默认）、grid 的 grid-template-rows: 1fr 或省略行定义，都是容器级行为，无需 hack、不干扰定位、可预测。
- 子项写
height: 200px或align-self: flex-start会立刻破坏等高——这点比写法本身更易被忽略 - flex 更适合单行布局，grid 在二维控制（如多行多列+等高+对齐）中更稳定
- 若父容器设了
overflow: hidden且子项有margin-bottom，可能意外截断高度，视觉上“不等高” - 子项内部用了
display: table-cell或绝对定位元素，会脱离文档流，不再参与 stretch 计算
复杂点在于：等高不是子元素自己的事，而是容器级行为；一旦你在子项里写了 height、max-height、align-self 或混用 vertical-align，拉伸就立刻失效——这点比怎么写更关键，也最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
