清除浮动的核心是解决父容器高度塌陷，主流推荐伪元素法（.clearfix::after），空标签法虽兼容但污染HTML；overflow、table等方案各有局限，Flex/Grid则根本规避该问题。
清除浮动的核心是解决父容器高度塌陷问题，常见方法有多种，但真正实用且现代的主要是伪元素法和空标签法。两者在原理、维护性和兼容性上差异明显。
空标签清除法：简单但不推荐
在浮动元素末尾插入一个空的 <div class="clear"></div>，并设置 .clear { clear: both; height: 0; overflow: hidden; }。
- 优点：逻辑直白，IE6+ 全兼容，调试时一眼可见
- 缺点：污染 HTML 结构，增加无语义标签；多个浮动区域就得重复添加，后期维护成本高
- 注意：
<br>标签自带clear行为，但同样违背结构与样式分离原则，不建议用
伪元素清除法：主流推荐方案
给浮动容器添加 clearfix 类，并用 ::after 生成隐藏块级元素来清除浮动：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* 兼容 IE6/7 */
}- 优点：纯 CSS 实现，不侵入 HTML；可复用为通用类；符合现代开发规范
- 关键细节：
content必须存在（哪怕为空），否则伪元素不渲染；display: block是触发清除的前提 - 兼容处理：IE6/7 需要
zoom: 1触发 hasLayout，现代项目可省略
其他方法简要对比
除了上述两种，还有几种辅助或替代方式：
立即学习“前端免费学习笔记（深入）”；
- overflow: hidden / auto：靠触发 BFC 解决塌陷，简洁但会裁剪溢出内容或意外出现滚动条
-
display: table 或 inline-block：能撑开父容器，但会破坏居中（
margin: 0 auto失效）或改变盒模型行为 - flex / grid 布局：根本绕过浮动，属于布局升级方案，不是“清除”，而是“不再需要清除”
怎么选？看场景
新项目直接用伪元素 clearfix；老项目维护或需强兼容 IE8 及以下，可保留空标签法作为兜底；若已全面使用 Flex/Grid，就无需考虑清除浮动了。
