使用 overflow: auto 触发BFC解决父容器高度塌陷，结合 min-height 保证子元素视觉等高；推荐用 Flexbox 实现自动等高布局，更简洁高效。
当CSS浮动容器中的子元素高度不一致时，容易导致布局错乱，比如父容器无法正确包裹子元素，或相邻行的元素排列出现参差。解决这个问题的核心是让子元素外观上保持统一高度，同时确保父容器能正确包含浮动内容。
使用 overflow: auto 让父容器自适应高度
给浮动容器设置 overflow: auto 可以触发BFC（块级格式化上下文），从而让父元素包含其所有浮动子元素，避免高度塌陷。
说明：- 父容器加上 overflow: auto 后，会自动延伸高度以包裹内部浮动元素。
- 这种方法不会强制子元素等高，但能解决父容器高度塌陷问题。
- 适合子元素高度自然变化，只需父容器完整包裹的场景。
示例代码：
.container {
overflow: auto; /* 包含浮动 */
}
.child {
float: left;
width: 50%;
}
使用 min-height 统一子元素最小高度
如果希望所有子元素看起来一样高，可以为它们设置相同的 min-height，保证最低视觉高度一致。
立即学习“前端免费学习笔记（深入）”；
- 设定一个合理的 min-height 值，如 200px，确保内容少的子元素也能和其他元素对齐。
- 结合 padding 和 line-height 优化内部内容垂直居中。
- 适用于卡片式布局、产品列表等需要视觉对齐的设计。
示例代码：
.child {
float: left;
width: 50%;
min-height: 200px;
}
更现代的替代方案：使用 Flexbox
虽然浮动曾是布局主流，但现在推荐用 Flexbox 实现等高布局，更加简洁高效。
- 父容器设置 display: flex，子元素自动等高。
- 无需计算高度，也不依赖 overflow 或 min-height。
- 响应式支持更好，维护更方便。
示例代码：
.container {
display: flex;
}
.child {
width: 50%;
}
基本上就这些。若必须使用浮动，用 overflow: auto 防止塌陷，搭配 min-height 控制视觉一致性；有条件的话，优先选择 Flexbox 布局。不复杂但容易忽略细节。
