使用 clear 属性可防止元素与浮动元素重叠，如 clear: both;。2. 通过 display: flow-root 或 overflow: hidden 创建 BFC 包含浮动。3. 推荐用 Flexbox 或 Grid 替代 float 布局。4. 为非浮动元素添加 margin 预留空间避免遮挡。现代布局更稳定，应优先选用。
浮动元素与其他元素重叠是CSS布局中常见的问题，通常出现在使用 float 属性进行布局时。当一个元素设置了浮动（如 float: left; 或 float: right;），它会脱离标准文档流，可能导致后续的非浮动元素“上移”并与其内容重叠。
1. 使用 clear 属性清除浮动影响
最直接的解决方式是在受浮动影响的元素上使用 clear 属性，防止其与浮动元素重叠。
常用值包括：-
clear: left;— 清除左侧浮动 -
clear: right;— 清除右侧浮动 -
clear: both;— 同时清除左右两侧浮动
例如：
.float-left {
float: left;
}
.content {
clear: both; /* 避免被前面的浮动元素覆盖 */
}
2. 为父容器创建 BFC（块级格式化上下文）
通过让父元素形成BFC，可以包含内部浮动元素，防止其溢出造成布局混乱。
立即学习“前端免费学习笔记（深入）”；
实现BFC的方法有：- 设置
overflow: hidden;或auto - 使用
display: flow-root;（现代推荐方法） - 设置
float: left/right;（不常用，会影响布局） - 使用
position: absolute;（需注意定位影响）
推荐写法：
.container {
display: flow-root; /* 自动包含子浮动元素，无副作用 */
}
3. 使用现代布局替代 float
对于新项目，建议用更现代的布局方式替代浮动，从根本上避免重叠问题。
可选方案：- Flexbox：适合一维布局，灵活控制对齐和排列
- CSS Grid：适合二维布局，精确控制行和列
示例（使用 Flexbox 实现左右布局）：
.flex-container {
display: flex;
}
.sidebar {
width: 200px;
}
.main-content {
flex: 1;
}
4. 添加外边距（margin）预留空间
如果浮动元素在侧边，可在相邻元素上添加 margin，为其留出空间，避免文字环绕或遮挡。
例如，左侧浮动菜单宽200px：
.content {
margin-left: 210px; /* 略大于浮动元素宽度，防止接触 */
}
基本上就这些方法。虽然 float 曾经是主要布局手段，但现在更推荐使用 Flexbox 或 Grid 来构建页面结构，减少兼容性和重叠问题。如果必须使用浮动，记得清除浮动影响或启用BFC来维持布局稳定。
