清除浮动是为了解决父容器因子元素浮动而塌陷的问题，通过在父容器添加clearfix类，利用伪元素插入并清除浮动，确保父容器正确包裹子元素，保持布局稳定。
在使用分页组件或布局中包含浮动元素时，经常会出现父容器无法正确包裹子元素的情况，导致布局错位。这通常是因为浮动元素脱离了文档流，父容器“塌陷”造成的。解决这个问题的关键是清除浮动，而 clear fix 是一种经典且兼容性良好的解决方案。
为什么需要清除浮动？
当一个容器内的子元素设置了 float: left 或 float: right 时，它们会脱离正常的文档流，父容器无法感知其高度，从而导致高度为0。这在分页、导航栏或网格布局中尤为明显，可能造成后续内容上移、样式混乱等问题。
使用 Clear Fix 清除浮动
Clear Fix 的核心思想是在浮动元素之后插入一个“清除”元素，强制父容器包含所有浮动子元素。现代做法通常使用伪元素来实现，无需额外的HTML标签。
CSS代码示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将 .clearfix 类应用到包含浮动元素的父容器上即可：
立即学习“前端免费学习笔记（深入）”；
1 2 3
关键点说明
- content: ""：伪元素必须有内容才能生效，即使为空字符串。
- display: table：比 block 更稳妥，避免某些浏览器下的外边距问题。
- clear: both：确保该元素位于左右浮动元素下方，从而撑起父容器。
现代替代方案（可选）
如果项目不需支持老旧浏览器，可以考虑以下方法：
- 使用 overflow: hidden 在父容器上，简单但可能裁剪阴影或下拉菜单。
- 采用 flex 或 grid 布局，从根本上避免浮动带来的问题。
但在维护旧项目或使用浮动布局的分页组件中，clearfix 依然是最可靠的选择。基本上就这些，不复杂但容易忽略。
