清除浮动是为解决float导致父容器高度塌陷的问题，通过在父元素添加clearfix类，利用伪元素插入并清除浮动，确保导航项水平排列且不影布局；现代推荐使用flex布局替代。
当使用浮动（float）实现导航栏的水平排列时，常会遇到子元素脱离文档流导致父容器高度塌陷的问题，进而引发布局错乱或折行。为解决这一问题，需要使用“清除浮动”技术，确保导航项连续排列且不影响后续元素。
为什么需要清除浮动
将导航项设置为 float: left 可使其横向排列，但浮动元素会脱离正常文档流，导致其父容器无法正确计算高度，可能表现为高度为0。这会使后续内容“上移”覆盖导航栏，或在窄屏幕下导航项折行。
使用 Clearfix 清除浮动
Clearfix 是一种通过伪元素在浮动元素末尾自动添加清除操作的技术，无需额外HTML标签。以下是标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将该类应用到包含浮动导航项的父元素上，即可修复高度塌陷问题。
立即学习“前端免费学习笔记（深入）”；
实际应用示例
假设导航结构如下：
<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 布局。
