实现浮动元素等高排列的关键是使用现代布局替代传统浮动。1. 推荐使用 Flexbox，父容器设为 display: flex，子项自动等高；2. 兼容旧浏览器可选 CSS Table 布局，父元素 display: table，子元素 display: table-cell；3. 必须用浮动时可用“伪等高”法，通过 padding-bottom 和 margin-bottom 配合 overflow: hidden 实现视觉等高；4. 最后可借助 JavaScript 动态设置统一高度。优先推荐 Flexbox 方案，简洁可靠，避免依赖浮动。
实现浮动元素等高排列，关键在于让多个浮动的列在视觉上保持相同高度，即使内容量不同。虽然 CSS 浮动本身不支持自动等高，但可以通过一些技巧来模拟效果。以下是几种实用方法：
1. 使用 Flexbox（推荐）
最简单且现代的方式是用 Flexbox 布局代替传统浮动。父容器设置为 flex 后，子项默认拉伸到相同高度。
示例代码：.container {
display: flex;
}
<p>.column {
flex: 1;
float: none; /<em> 不再需要浮动 </em>/
}</p>这种方法无需额外 hack，支持良好，强烈建议新项目使用此方式。
2. 使用 CSS Table 布局
将父容器设为 table，子元素设为 table-cell，可以自然实现等高。
立即学习“前端免费学习笔记（深入）”；
示例代码：.container {
display: table;
width: 100%;
}
<p>.column {
display: table-cell;
width: 33.3%;
float: none;
}</p>兼容性较好，适合不支持 Flexbox 的旧环境，但语义上不够清晰。
3. 模拟等高：背景填充法（伪等高）
当必须使用浮动时，可通过给父元素设置背景色、子元素用负边距和内边距制造“视觉等高”。
核心思路：- 父元素 overflow: hidden
- 每个子元素 padding-bottom 足够大（如 9999px）
- 同时设置 margin-bottom 负值抵消（-9999px）
- 父元素设置背景色，遮住溢出部分
.container {
overflow: hidden;
background: #eee;
}
<p>.column {
float: left;
width: 33.3%;
padding-bottom: 9999px;
margin-bottom: -9999px;
}</p>这是经典的“假等高”方案，适用于老旧浏览器或无法修改布局结构的场景。
4. JavaScript 动态设置高度（备用方案）
如果只能用浮动且样式无法控制，可用 JS 找出最高列并统一高度。
示例代码：const columns = document.querySelectorAll('.column');
let maxHeight = 0;
<p>columns.forEach(col => {
maxHeight = Math.max(maxHeight, col.offsetHeight);
});</p><p>columns.forEach(col => {
col.style.height = maxHeight + 'px';
});</p>灵活性高，但依赖脚本，建议仅在其他方法不可行时使用。
基本上就这些。优先选择 Flexbox，既简洁又可靠。传统浮动等高本质是视觉欺骗，现代开发应尽量避免依赖浮动布局。
