在CSS布局中，元素设置float属性后会脱离普通文档流，导致父容器无法自动计算其高度，出现高度塌陷问题。为了让后续内容正常排列、父容器背景与边框表现正确，必须主动清除浮动。常见的清除方式包括空标签法、伪元素法、父级设overflow以及使用flex等，其中空标签与伪元素对比最为典型。
一、空标签清除浮动方法
空标签法是在浮动元素后面添加一个没有语义的块级标签，例如<div>或<br>，并为其设置clear属性。这种方式思路直白，浏览器解析时遇到clear:left或clear:both的空节点，就会强制该节点移动到浮动元素下方，从而把父容器高度撑开。
下面是一个简单的空标签清除浮动示例。容器.box内部有两个左浮动子元素，末尾放入一个空div来清除浮动：
<style>
.box { border: 1px solid #333; }
.float-left { float: left; width: 100px; height: 100px; background: #eee; }
.clear-fix { clear: both; }
</style>
<div class="box">
<div class="float-left">左侧</div>
<div class="float-left">右侧</div>
<div class="clear-fix"></div>
</div>
这种写法的优点是新手容易理解，哪里塌陷就在哪里加标签，调试直观。但缺点同样明显：HTML结构中混入大量无意义标签，降低了语义化程度，也不利于后期维护。当页面浮动模块多时，空标签会迅速膨胀，造成代码冗余。
另外，空标签法对CSS依赖较弱，即便样式表加载失败，只要标签存在且浏览器默认clear生效，布局也不会完全崩坏。不过在现代组件化开发中，结构和逻辑分离是基本原则，空标签显然违背了这一理念。
二、伪元素清除浮动方法
伪元素法利用CSS的:after或:before在元素内容前后插入生成内容，而不在HTML里写额外节点。最经典的方案是clearfix类，通过为父容器添加该类，在其后生成一个看不见的块级元素并清除浮动。
核心原理是伪元素默认是行内元素，必须显式声明display:block，再配合clear:both才能起到撑开高度的作用。同时为了兼容旧版IE，常补上zoom:1触发hasLayout。代码如下：
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
*zoom: 1; /* 针对IE6/IE7触发hasLayout */
}
使用方式非常简洁，只需在父容器上增加class：
<div class="box clearfix"> <div class="float-left">左侧</div> <div class="float-left">右侧</div> </div>
伪元素方案不污染HTML结构，所有清除逻辑收敛在CSS中，符合样式与结构分离原则。它在主流浏览器中表现稳定，也能和预处理器结合批量复用。缺点是初学者可能不理解content空字符串与display:block的必要性，调试时看不到真实DOM节点，排查成本略高。
值得注意的是，伪元素清除浮动不会影响HTML可读性，在组件库和大型项目中几乎是标配。相比空标签，它让模板保持干净，也方便统一通过类名控制清除行为。
三、空标签与伪元素对比分析
从多个维度看，二者差异显著。我们通过一个对照表来梳理核心区别：
| 对比维度 | 空标签法 | 伪元素法 |
|---|---|---|
| HTML结构 | 增加无意义节点 | 结构无变化 |
| 语义化 | 差 | 好 |
| 维护性 | 分散难管理 | 统一类名复用 |
| 调试难度 | 直观可见 | 需理解伪元素 |
| 兼容性 | 所有浏览器 | 需IE8+或zoom兼容 |
在小型静态页或快速原型中，空标签因其零理解成本仍有使用价值；但在团队协作、长期维护的系统里，伪元素clearfix明显更优。它把布局修复动作抽象为样式规则，避免了HTML膨胀。
此外，现代布局如flex和grid已能从根源规避浮动塌陷，但在维护老项目或写兼容页面时，理解这两种清除浮动方式的差异依然关键。建议把clearfix写成基础样式，全局复用，减少重复代码。
四、其他清除浮动方式简述
除了上述两种，还可以给父容器设置overflow:hidden或overflow:auto，利用BFC（块级格式化上下文）包含浮动。这种方式代码少，但可能裁剪阴影或触发滚动条，适用场景有限。
另一种思路是直接不用浮动，改用display:flex。父容器设为flex后，子元素自然排列，根本不会产生高度塌陷。示例：
.box {
display: flex;
}
.box > div {
width: 100px;
height: 100px;
background: #eee;
}
虽然flex更现代，但老浏览器支持度和部分替换成本使其无法完全取代传统清除浮动方案。掌握空标签与伪元素的区别，仍是前端基本功。