答案：通过float配合padding-bottom和margin-bottom负值技巧，结合overflow:hidden实现视觉等高布局。具体为父容器设背景色并隐藏溢出，子列用大内边距拉伸高度、负边距抵消实际撑高，形成伪等高效果，适用于不支持Flex或Grid的环境。
使用 CSS float 实现等高列布局，虽然不是最现代的方法，但在不使用 Flexbox 或 Grid 的场景下依然有效。核心思路是让多列并排排列，并通过背景模拟“等高”视觉效果。
1. 原理：外层容器背景模拟等高
由于 float 本身不会让列自动等高（高度由内容决定），我们通过给父容器设置背景色，再配合子列的内边距或浮动方式，使视觉上看起来等高。
常见做法是使用“假等高”技术：2. HTML 结构示例
假设要实现两列等高布局：
<div class="row"> <div class="col left">左侧内容较多<br>...</div> <div class="col right">右侧内容少</div> </div>
3. CSS 实现代码
利用伪等高 + 负边距技巧：
立即学习“前端免费学习笔记（深入）”；
.row {
overflow: hidden; /* 裁剪超出部分 */
background: #eee; /* 右列背景色 */
width: 100%;
}
.col {
float: left;
width: 50%;
padding-bottom: 9999px; /* 极大下内边距拉伸视觉高度 */
margin-bottom: -9999px; /* 负下边距抵消，防止真实撑开 */
}
.left {
background: #ddd; /* 左列背景色 */
}
.right {
background: #eee;
}
说明：- padding-bottom 和 margin-bottom 成对使用，制造“无限拉高”的错觉
- overflow: hidden 在父级裁掉被拉长的部分，保持整洁外观
- 两列背景色不同也能保持等高视觉
4. 注意事项与局限
这种方法虽能实现视觉等高，但存在一些限制：
- 必须设定固定列宽（如百分比）
- 响应式适配较弱，不如 Flexbox 灵活
- 需要手动清除浮动（可用 overflow 或伪元素）
- padding/margin 数值要足够大以覆盖最长列
基本上就这些。虽然现在更推荐用 display: flex 或 grid 实现真正等高列，但在兼容老浏览器时，float 配合背景模拟仍是可行方案。
