通过Float与伪元素结合，利用padding-bottom和负margin-bottom使浮动列视觉等高，并用::after清除浮动防止塌陷，适用于兼容旧浏览器的布局。
实现浮动元素的等高布局，关键在于让多个浮动的子元素在视觉上保持相同高度，即使内容量不同。通过 Float 与 伪元素（::after） 结合的方式，可以有效清除浮动并辅助构建视觉上的等高效果。以下是具体实现方法。
1. 使用 Float 布局基本结构
将多个列使用 float 属性进行横向排列，比如创建两栏或三栏布局。
.container {
overflow: hidden; /* 防止父容器塌陷 */
}
.column {
float: left;
width: 50%;
padding-bottom: 1000px; /* 添加大底部内边距 */
margin-bottom: -1000px; /* 用负外边距抵消 */
background-color: #e0f7fa;
}
这种技术被称为“padding-bottom + margin-bottom” 技巧。通过给所有列设置相同的较大 padding-bottom 并用负 margin-bottom 抵消，使各列视觉上等高。
2. 使用伪元素清除浮动
浮动会导致父容器无法正确包裹子元素，造成高度塌陷。使用 ::after 伪元素可清除浮动，恢复容器正常高度。
立即学习“前端免费学习笔记（深入）”；
.container::after {
content: "";
display: table;
clear: both;
}
这样能确保父容器包含所有浮动子元素，同时不影响布局结构。伪元素不需额外 HTML 标签，语义清晰且维护方便。
3. 实际应用示例
假设需要两个等高浮动列：
<div class="container"> <div class="column" style="height: 200px;">左侧内容</div> <div class="column" style="height: 100px;">右侧内容较少</div> </div>
尽管右侧内容少，但由于 padding 和 margin 的配合，两列背景色会延伸到相同高度，实现视觉等高。
4. 注意事项与局限性
- 这种方法依赖固定或预估的 padding 值，不适合动态高度变化极大的场景。
- 现代布局更推荐使用 Flexbox 或 Grid，但 float + 伪元素仍适用于兼容旧浏览器的项目。
- 确保负 margin 不影响其他布局元素，避免出现意外重叠。
基本上就这些。虽然 float 已逐渐被新布局方式取代，但在特定场景下，结合伪元素仍是一种实用的等高实现手段。
