在CSS布局里，子元素设置float后脱离文档流，会导致父容器无法被撑开，出现高度塌陷。为了解决这个问题，开发者总结出多种清除浮动的方法，其中clearfix伪元素方案最为常用。
常见清除浮动方法
1. 额外标签法
在浮动元素后面添加一个空标签，并设置clear:both。这种方式结构简单但会增加无用DOM节点。
<div class="parent"> <div class="child" style="float:left;">浮动内容</div> <div style="clear:both;"></div> </div>
2. 父级设置overflow
给父容器加overflow:hidden或auto，可触发BFC阻止高度塌陷，但可能裁剪内容或产生滚动条。
.parent {
overflow: hidden;
}
3. 伪元素clearfix
利用:after在父元素内容末尾生成块级元素并清除浮动，不破坏HTML结构，兼容性良好。
clearfix原理与实现
clearfix本质是在父元素内部末尾插入一个不可见的块级表元素，通过clear:both闭合浮动。标准实现如下：
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
*zoom: 1; /* IE6/7触发hasLayout */
}
若只需现代浏览器，可简化为：
.clearfix::after {
content: "";
display: block;
clear: both;
}
方法对比
| 方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签 | 直观易写 | 多无用标签 |
| overflow | 代码少 | 可能裁剪 |
| clearfix | 无结构污染 | 需写CSS |
使用建议
日常项目推荐直接使用clearfix类挂在父容器上。注意文中提到的<input>等标签名称在描述时需转义，而函数调用如clear()不是标签。合理清除浮动可保障布局稳定。