浮动等高是视觉欺骗而非真实dom行为，本质是绕标准走弯路；flex/grid通过容器级拉伸实现真正等高，2015年起已获主流浏览器原生支持。

浮动元素脱离文档流，父容器无法感知高度

这是所有问题的根源。float 的设计语义是“让文字绕排”，不是布局工具——一旦元素设了 float: left 或 float: right，它就从正常文档流中抽离，父容器计算自身高度时直接忽略它。结果就是：左列高 500px、右列高 200px，父容器高度仍为 0（或仅由非浮动内容撑开），两列底部自然错位。

常见错误现象包括：

• 加了 clear: both 后父容器能显示了，但列高依然不一致
• height: 100% 在浮动子项里完全无效，因为父容器没有可参照的高度
• 用 overflow: hidden 是为了触发 BFC 防塌陷，不是为了等高——它只让父容器“包住”浮动项，不改变子项各自的高度计算

所谓“等高”全是视觉欺骗，不是真实 DOM 行为

你看到的“等高”，其实是靠 padding-bottom: 9999px + margin-bottom: -9999px + overflow: hidden 组合出来的假象。这个 trick 并没让元素真正变高，只是把背景色和 padding 区域强行拉到底部，再用负 margin 把内容位置拽回来，最后裁掉溢出部分。

这种做法在实际开发中极易翻车：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• border-bottom 或 box-shadow 只画在真实内容区域，不会延伸到“伪高度”部分，导致边框断开、阴影缺失
• 列内有 position: relative 或 z-index 时，定位基准仍是原始高度，不是视觉高度，容易偏移
• 响应式切换列数（比如从两列变单列）时，若没同步重置 padding-bottom 和 margin-bottom，会出现巨大空白或内容被裁切

Flex 和 Grid 的等高是容器级行为，浮动不是

display: flex 的 align-items: stretch（默认值）和 display: grid 的 grid-template-rows: 1fr，都是由容器主动控制子项在交叉轴上的拉伸行为。它们不依赖子项内容，也不需要 hack，只要满足基本前提（如父容器高度可计算、没显式关闭 stretch），就能稳定生效。

而浮动方案里，等高这件事根本不在容器职责范围内——它既不声明、也不协调子项高度，全靠人工“骗”浏览器渲染。一旦你在子项里写了 align-self: flex-start、height、vertical-align 这类属性，或者混用 position，拉伸逻辑立刻失效。这点比写法本身更易被忽略。

现代项目里继续用 float 做等高，本质是在绕标准走弯路

2015 年起，所有主流浏览器都已原生支持 flex 和 grid。硬套浮动等高，90% 的调试时间其实花在修 zoom: 1、调 padding-bottom 数值、适配 media query 的清除逻辑上——这些都不是功能需求，而是技术债务。

真正复杂的地方在于：等高不是子元素自己的事，而是容器必须参与的行为；而浮动天生拒绝容器参与。你越想让它“看起来等高”，就越要对抗它的原始设计逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！