清除浮动是为解决父元素因子元素浮动导致高度塌陷的问题，通过给父元素添加 clearfix 类，利用 ::after 伪元素生成不可见的块级元素并设置 clear: both，从而包含浮动元素；标准写法为 .clearfix::after { content: ""; display: table; clear: both; }，该方法无需额外标签、兼容性好，虽现代布局多用 Flexbox 或 Grid，但在旧项目中仍实用。
当使用浮动（float）布局时，父元素无法自动撑开包含高度，导致后续内容可能覆盖在浮动元素上方。解决这个问题常用的方法是清除浮动，其中通过 after 伪元素 实现的“clearfix”技术最为推荐。
为什么需要清除浮动
浮动元素脱离正常文档流，父容器无法感知其存在，造成高度塌陷。比如一个包含两个左浮动子元素的 div，若不处理，它的高度可能为 0，影响页面布局。
使用 after 伪元素清除浮动
通过给父元素添加一个隐藏的伪元素，并设置清除浮动，可以强制父元素包含所有浮动子元素。
具体实现方式如下：- 选择需要清除浮动的父元素
- 使用 ::after 伪元素生成一个不可见的内容
- 设置该内容为块级元素并清除左右浮动
- 确保不影响原有布局
标准 clearfix 写法：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到浮动容器上即可解决问题。使用 display: table 而不是 block，是为了避免某些浏览器中产生不必要的空白。
兼容性与现代实践
上述方法兼容所有主流浏览器，包括较老版本。现代开发中虽然 Flexbox 和 Grid 布局已逐渐替代浮动布局，但在维护旧项目或特定排版场景中，这种 clearfix 技术依然实用。
不需要额外 HTML 标签，纯 CSS 解决，结构清晰且易于复用。
基本上就这些，加个类就能搞定浮动带来的布局问题。
