清除浮动是为解决父容器因子元素浮动导致高度塌陷的问题，常用方法包括额外标签法、overflow方法和clearfix技巧。其中推荐使用兼容性良好的clearfix方案：通过::after伪元素创建隐藏块清除浮动，并结合*zoom:1触发IE6/7的hasLayout以实现跨浏览器支持。该方法在不影响布局的前提下有效包裹浮动元素，适用于需兼容旧版浏览器的项目；现代开发中若无需支持IE8以下版本，可简化为display:table形式。随着Flexbox和Grid布局的普及，浮动布局虽逐渐减少，但在图文环绕等场景中clearfix仍具实用价值。
在CSS中处理浮动元素时，清除浮动（clearing floats）是一个常见的布局问题。当一个容器包含浮动元素时，它可能无法正确包裹子元素，导致布局错乱。为了解决这个问题，开发者使用了多种“clearfix”技术，这些方法在不同浏览器中的兼容性也有所差异。
什么是清除浮动？
浮动元素脱离正常文档流，父容器无法感知其高度，从而出现高度塌陷。例如：
一个
包含两个float:left的子div，但父div显示高度为0——这就是需要“清除浮动”的场景。
解决办法包括：添加额外标签清除、overflow方法 和 clearfix技巧。
立即学习“前端免费学习笔记（深入）”；
常见的清除浮动方法
1. 额外标签法
在浮动元素后添加一个空元素并设置 clear:both：
.clear { clear: both; }缺点是结构冗余，不符合语义化原则。
2. overflow 方法
给父容器设置 overflow:hidden 或 overflow:auto：
.container { overflow: hidden; }优点是简单，但可能裁剪内容或影响滚动，不适用于有定位元素溢出的情况。
3. clearfix（推荐）
利用伪元素在现代浏览器中清除浮动，同时兼容老版本IE。
兼容性的clearfix写法
为了兼顾现代浏览器和旧版IE（如IE6/7），通常采用如下代码：
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 触发IE6/7的hasLayout */
}说明：
- ::after 创建一个隐藏的块级元素来清除浮动
- content: "" 是必须的，否则伪元素无效
- *zoom: 1 是IE专有属性，触发 hasLayout 机制，在IE6/7中实现块级包裹
这段代码支持IE8及以上以及所有现代浏览器。如果还需支持IE6/7，上述写法已足够。
现代开发中的建议
随着Flexbox和Grid布局的普及，传统浮动布局逐渐减少。但在维护旧项目或使用浮动进行图文环绕等场景中，clearfix依然有用。
如果项目不需要支持IE8以下浏览器，可以简化为：
.clearfix::after {
content: "";
display: table;
clear: both;
}display: table 避免生成实际块的高度问题，更稳妥。
基本上就这些。选择哪种方式取决于你的浏览器支持要求和项目上下文。主流方案用带 *zoom 的 clearfix 就够用了。
