浮动重叠因元素脱离文档流导致父容器无法包裹子元素，后续内容上移造成重叠；可通过clearfix类、overflow触发BFC或改用Flex/Grid布局解决。
浮动元素重叠是CSS布局中常见的问题，通常出现在多个元素设置了float属性但父容器没有正确清除浮动时。解决这个问题的关键在于理解浮动的特性，并合理使用清除浮动的方法。
为什么会出现浮动重叠？
当元素设置float: left或float: right后，会脱离正常的文档流，导致父容器无法感知其高度，后续元素可能会上移并占据原本的空间，造成视觉上的重叠。
常见场景包括：
- 多个浮动子元素撑不开父容器
- 非浮动元素被拉到浮动元素下方
- 多列布局错位或覆盖
使用clearfix清除浮动
最常用且兼容性好的方法是给父容器添加一个清除浮动的类（clearfix）。
立即学习“前端免费学习笔记（深入）”；
示例代码：.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用在包含浮动元素的父级上，可以确保父容器包含所有浮动子元素，避免与其他内容重叠。
给父容器设置高度或overflow
如果知道内容高度固定，可以直接设置父元素高度。
更灵活的方式是利用overflow触发BFC（块级格式化上下文）：
.container {
overflow: hidden; /* 或 auto */
}
这样可以让父元素形成独立的布局环境，包裹住内部的浮动元素，防止外部元素侵入。
使用Flex或Grid替代浮动
现代布局推荐使用更强大的Flexbox或Grid代替传统浮动布局。
例如用Flex实现两栏布局：
.container {
display: flex;
}
.left {
float: left; /* 不再需要 -->
}
.right {
margin-left: 200px; /* 不再需要 -->
}
/* 改为 */
.container {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: 1;
}
Flex布局天然解决浮动带来的各种问题，结构更清晰，维护更方便。
基本上就这些。根据项目需求选择合适的方法：老项目可用clearfix，新项目建议直接用Flex或Grid，从根本上避免浮动带来的麻烦。
