clearfix用于解决浮动元素导致父容器高度塌陷的问题，通过在父元素上应用特定CSS规则使其正确包裹子元素。常见写法包括基础clear:both（不推荐）、micro-clearfix及Nicolas Gallagher提出的兼容方案，后者通过display:table和zoom:1支持IE6-IE8。现代开发推荐使用Flexbox或Grid布局替代浮动，若需兼容旧浏览器则采用完整micro-clearfix类。实际项目中应优先选择现代布局方式，避免依赖清除浮动技术。
在使用 CSS 清除浮动时，clearfix 是一种常见且有效的技术，用于解决父元素因子元素浮动而高度塌陷的问题。虽然现代浏览器对 clearfix 的支持良好，但在一些旧版本浏览器（尤其是 IE6-IE7）中仍存在兼容性问题。
什么是 clearfix？
当一个容器内的子元素全部设置为 float: left/right 时，父容器无法自动撑开高度，导致布局错乱。clearfix 就是用来清除这种影响，使父容器正确包裹浮动元素。
常见的 clearfix 写法及兼容性分析
以下是几种主流的 clearfix 方法及其在不同浏览器中的表现：
- 基础 clear:both 方式（不推荐）：通过额外 HTML 标签如 来清除浮动。这种方法破坏结构语义，维护困难，且在 IE6-7 中可能出现间距问题。
-
micro-clearfix（较老方案）：
.clearfix { *zoom: 1; } .clearfix:after { content: ""; display: block; clear: both; }这种写法适用于 IE8+ 和现代浏览器。*zoom:1 触发 IE6-7 的 hasLayout 机制，解决低版本 IE 不渲染 :after 的问题。但 IE6-7 对 :after 支持不完整，某些情况下仍失效。 -
推荐的兼容性 clearfix（The Micro Clearfix Hack）：
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }此方法由 Nicolas Gallagher 提出，兼容 IE6-IE8。利用 display: table 在前后插入匿名表格单元格，避免外边距重叠，并确保块级格式化上下文生成。加上 *zoom:1 兼容旧版 IE。
现代浏览器与未来趋势
目前主流项目已不再需要考虑 IE6-IE8，可直接使用更简洁的方式：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
}
或者采用 Flexbox 或 Grid 布局替代浮动布局，从根本上避免清除浮动的需求。例如：
.container {
display: flex;
/* 子项自动排列，无需浮动 */
}
实际开发建议
- 若需支持 IE6-IE8，使用完整的 micro-clearfix 配合 *zoom。
- 对于现代项目，优先考虑 Flex 或 Grid 布局。
- 如果必须用浮动，封装一个通用 .clearfix 类并统一引入 CSS。
- 避免滥用 !important 或内联样式干扰 clearfix 生效。
基本上就这些。clearfix 虽小，但在复杂布局中很关键。理解其原理和兼容性边界，才能写出稳定可靠的 CSS。
