浮动导致内容遮挡需清除浮动影响，使用clear添加空元素或伪元素清除，overflow:hidden触发BFC包含浮动子元素，推荐clearfix伪元素方案解决高度塌陷问题。
浮动元素导致内容被遮挡是CSS布局中的常见问题，通常是因为父容器没有包含浮动的子元素，造成高度塌陷。解决这类问题的关键是清除浮动影响，让容器正确包裹内部元素。使用 clear 和 overflow 是两种简单有效的解决方案。
理解浮动带来的问题
当一个元素设置了 float: left 或 float: right，它会脱离标准文档流，父容器无法感知其高度，可能导致后续内容“上移”并被遮挡，或父容器显示不完整。
方法一：使用 clear 清除浮动
在浮动元素之后添加一个清除浮动的元素，可以阻止后续内容环绕浮动块。
- 给浮动元素后的元素设置 clear: both;
- 也可添加一个空元素并应用清除样式：
clear: both;
}
HTML中使用：
立即学习“前端免费学习笔记（深入）”；
左侧浮动
方法二：使用 overflow 触发BFC（块级格式化上下文）
给父容器设置 overflow: hidden 或 overflow: auto 可以让其包含内部浮动元素，防止高度塌陷。
- 简单有效，无需额外标签
- 适用于大多数场景，但注意 overflow: hidden 会裁剪溢出内容
overflow: hidden; /* 包含浮动子元素 */
}
推荐做法：结合clearfix类
更现代的方式是使用伪元素实现clearfix，既干净又兼容。
.clearfix::after {content: "";
display: table;
clear: both;
}
将该类加在包含浮动元素的父容器上，即可确保布局完整。
基本上就这些。合理使用 clear 和 overflow，能快速解决浮动遮挡问题，保持页面结构清晰稳定。
