clearfix用于解决父容器因子元素浮动导致的高度塌陷问题，通过在父容器添加伪元素并清除浮动，使其能正确包裹子元素，保持布局稳定。
当使用浮动（float）布局时，父容器常常无法正确包裹住内部的浮动子元素，导致布局错乱。这个问题可以通过 clearfix 技巧来解决。它能让父容器自动撑开，包含所有浮动元素，而无需额外的HTML标签或手动设置高度。
为什么需要clearfix？
浮动元素会脱离正常的文档流，父容器在计算高度时会“忽略”它们，造成父容器高度塌陷。例如：
.container {
background: #eee;
}
.box {
float: left;
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
此时 .container 的高度可能为0，尽管里面有两个 .box 元素。这就是 clearfix 要解决的问题。
clearfix的经典实现方式
最常见的做法是通过伪元素 ::after 在容器末尾插入一个清除浮动的元素：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
然后将这个类应用到需要包含浮动子元素的父容器上：
<div class="container clearfix"> <div class="box"></div> <div class="box"></div> </div>
这样父容器就能正确计算高度，完整包裹住浮动元素。
兼容性与现代写法
如果需要支持老版本IE（如IE6/7），可以添加 zoom: 1 触发hasLayout机制：
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
现代项目中，若不需支持旧浏览器，仅使用 ::after 即可。也可以直接使用 overflow: hidden 或 overflow: auto 作为替代方案：
.container {
overflow: hidden; /* 可触发BFC，包含浮动 */
}
但注意：这可能会裁剪掉超出容器的内容，使用时要谨慎。
实际应用场景建议
在以下情况推荐使用clearfix：
- 多列浮动布局，如图片+文字组合
- 导航菜单项使用 float:left 排列
- 需要保持结构语义清晰，避免空标签占位
定义一个通用的 .clearfix 类，全局引入，按需使用，是最简洁高效的做法。
基本上就这些。掌握 clearfix 原理后，能更灵活地处理传统浮动布局中的高度问题，确保页面结构稳定。
