clearfix是通过伪元素插入清除浮动的内容，使父容器正确包裹浮动子元素的技术。使用::after创建隐藏块级元素并应用clear: both，结合zoom: 1兼容旧版IE，可防止父元素高度塌陷，常用于处理浮动布局问题。
在CSS中，clearfix 是一种常用的技巧，用于解决父元素因子元素浮动而无法正确包裹内容的问题。当子元素使用了 float: left 或 float: right 时，父元素可能会“塌陷”，即高度计算为0。通过 clearfix 方法可以有效清除这种影响。
什么是clearfix？
clearfix 是一种通过伪元素在容器末尾插入一个清除浮动的元素，从而让父容器能够包含所有浮动子元素的技术。它不依赖额外的HTML标签，仅用CSS即可实现。
现代clearfix写法（推荐）
以下是最常见且兼容性良好的clearfix写法：.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
zoom: 1; /* 兼容IE6/7 */
}
说明：
-
::after创建一个虚拟元素，插入到容器内容末尾。 -
content: ""是必须的，否则伪元素无效。 -
clear: both确保该元素位于所有浮动元素下方。 -
height: 0和visibility: hidden避免占用实际空间。 -
zoom: 1触发IE6/7的hasLayout机制，防止渲染问题。
如何使用clearfix
只需将 clearfix 类应用到包含浮动子元素的父容器上：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
<div class="clearfix"> <div style="float: left;">左侧浮动</div> <div style="float: right;">右侧浮动</div> </div>
此时父 div 能正确包裹两个浮动子元素，不会发生高度塌陷。
替代方案与注意事项
虽然clearfix很实用，但也有其他方式处理浮动：
- 使用
overflow: hidden或overflow: auto在父元素上，可触发BFC（块级格式化上下文），也能包含浮动，但可能裁剪溢出内容。 - 现代布局更推荐使用
flex或grid，从根本上避免浮动带来的问题。 - 如果项目不需要支持老旧浏览器，可省略
zoom: 1。
基本上就这些。clearfix虽是老技术，但在维护旧项目或需要兼容性的场景中依然很有用。掌握它有助于理解CSS中的文档流和清除浮动机制。
