清除浮动是为解决float导致父容器高度塌陷的问题，通过在父元素添加clearfix类，利用伪元素插入并清除浮动，确保导航项水平排列且不影布局；现代推荐使用flex布局替代。

当使用浮动（float）实现导航栏的水平排列时，常会遇到子元素脱离文档流导致父容器高度塌陷的问题，进而引发布局错乱或折行。为解决这一问题，需要使用“清除浮动”技术，确保导航项连续排列且不影响后续元素。

为什么需要清除浮动

将导航项设置为 float: left 可使其横向排列，但浮动元素会脱离正常文档流，导致其父容器无法正确计算高度，可能表现为高度为0。这会使后续内容“上移”覆盖导航栏，或在窄屏幕下导航项折行。

使用 Clearfix 清除浮动

Clearfix 是一种通过伪元素在浮动元素末尾自动添加清除操作的技术，无需额外HTML标签。以下是标准写法：

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

将该类应用到包含浮动导航项的父元素上，即可修复高度塌陷问题。

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

htmlppt.skill

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

下载

实际应用示例

假设导航结构如下：

<nav class="clearfix">
  <li style="float: left;">首页</li>
  <li style="float: left;">产品</li>
  <li style="float: left;">服务</li>
</nav>

此时 .clearfix 会确保 nav 完整包裹所有浮动项，防止折行或布局异常。

现代替代方案

虽然 clearfix 仍广泛兼容，但现代布局更推荐使用 Flexbox 实现导航排列：

.nav {
  display: flex;
}
.nav li {
  list-style: none;
}

Flex 布局天然不脱离文档流，无需清除浮动，代码更简洁，响应式支持更好。

基本上就这些。对于老旧项目可继续用 clearfix，新项目建议优先考虑 Flex 或 Grid 布局。