浮动导致内容遮挡需清除浮动影响，使用clear添加空元素或伪元素清除，overflow:hidden触发BFC包含浮动子元素，推荐clearfix伪元素方案解决高度塌陷问题。

浮动元素导致内容被遮挡是CSS布局中的常见问题，通常是因为父容器没有包含浮动的子元素，造成高度塌陷。解决这类问题的关键是清除浮动影响，让容器正确包裹内部元素。使用 clear 和 overflow 是两种简单有效的解决方案。

理解浮动带来的问题

当一个元素设置了 float: left 或 float: right，它会脱离标准文档流，父容器无法感知其高度，可能导致后续内容“上移”并被遮挡，或父容器显示不完整。

方法一：使用 clear 清除浮动

在浮动元素之后添加一个清除浮动的元素，可以阻止后续内容环绕浮动块。

• 给浮动元素后的元素设置 clear: both;
• 也可添加一个空元素并应用清除样式：

.clearfix {
  clear: both;
}

HTML中使用：

立即学习“前端免费学习笔记（深入）”；

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

左侧浮动

方法二：使用 overflow 触发BFC（块级格式化上下文）

给父容器设置 overflow: hidden 或 overflow: auto 可以让其包含内部浮动元素，防止高度塌陷。

• 简单有效，无需额外标签
• 适用于大多数场景，但注意 overflow: hidden 会裁剪溢出内容

.container {
  overflow: hidden; /* 包含浮动子元素 */
}

推荐做法：结合clearfix类

更现代的方式是使用伪元素实现clearfix，既干净又兼容。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

将该类加在包含浮动元素的父容器上，即可确保布局完整。

基本上就这些。合理使用 clear 和 overflow，能快速解决浮动遮挡问题，保持页面结构清晰稳定。