清除浮动是为了解决父元素高度塌陷和后续元素错位问题。因浮动元素脱离文档流，导致父容器无法包裹子元素，周围块级元素排列异常。常见清除方法包括：使用clear属性添加空标签（不推荐）、伪元素清除法（推荐，通过::after生成隐藏块并clear: both）、overflow触发bfc（简洁但可能裁剪内容）。现代布局建议采用flexbox或css grid，它们不脱离文档流，可避免浮动副作用，提升代码可维护性。
当使用CSS的float属性进行布局时，常常会遇到父元素高度塌陷、后续元素错位等问题。这是因为浮动元素脱离了正常的文档流，导致其父容器无法正确感知其高度，周围的块级元素也可能被错误排列。解决这类问题的关键是清除浮动，并恢复正常的文档流行为。
为什么需要清除浮动？
浮动元素原本是为了实现文字环绕图片等效果而设计的。但当用于整体布局时，如果不清除浮动，会出现以下常见问题：
- 父容器高度为0（高度塌陷）
- 后面的元素“钻到”浮动元素下方
- 整个页面布局出现错乱
因此，在使用浮动后，必须通过适当方法清除浮动影响，使布局恢复正常。
常见的浮动清除方法
以下是几种实用且兼容性良好的清除浮动方式，可根据项目需求选择使用。
立即学习“前端免费学习笔记（深入）”；
1. 使用 clear 属性在浮动元素之后添加一个空元素，并设置clear: both;来阻止后续元素与浮动元素并排。
<div class="box float-left">左侧内容</div> <div class="box float-right">右侧内容</div> <div style="clear:both;"></div>
这种方法简单直接，但增加了无意义的HTML标签，不推荐在现代开发中频繁使用。
通过CSS的::after伪元素在容器末尾插入一个隐藏的块级元素，并清除其两侧浮动，从而闭合浮动。
.clearfix::after {
content: "";
display: block;
clear: both;
}
将clearfix类应用到包含浮动子元素的父容器上即可解决高度塌陷问题。这种方式语义清晰、无需额外标签，是目前最常用的方法。
给父容器设置overflow: hidden或overflow: auto可以触发BFC（块级格式化上下文），让父元素包裹住内部的浮动元素。
.container {
overflow: hidden;
}
此方法简洁有效，但需注意overflow: hidden可能会影响容器内溢出内容的显示，比如下拉菜单被裁剪。
现代布局替代方案
虽然清除浮动能解决问题，但从长远看，更推荐使用现代CSS布局方式替代浮动布局。
- Flexbox：弹性布局能轻松实现对齐、分布和响应式设计，无需浮动
- CSS Grid：二维网格布局更适合复杂页面结构
- inline-block + vertical-align：适用于简单横向排列场景
这些新方法天然不脱离文档流，避免了浮动带来的各种副作用，代码更清晰易维护。
基本上就这些。对于旧项目中的浮动布局，掌握清除浮动的方法非常必要；而在新项目中，建议优先考虑Flex或Grid布局，从根本上规避问题。
