清除浮动的方法包括：使用clear属性、设父元素固定高度、触发bfc或使用clearfix技巧；其中推荐通过display: flow-root或伪元素clearfix类来实现，既保持结构语义化又有效包含浮动元素。
在CSS布局中，浮动（float）曾是实现多栏布局的主要手段。但浮动元素会脱离文档流，导致父容器无法正确包裹子元素，出现高度塌陷问题。为解决这一问题，“清除浮动”成为前端开发中的常见需求。_clearfix 是一种经典且高效的解决方案，本文将解析常用的清除浮动方法，并深入讲解 clearfix 技巧的实现原理与应用。
常见的清除浮动方法
在实际开发中，有多种方式可以清除浮动带来的影响，以下是几种主流方法：
- 使用 clear 属性：在浮动元素后添加一个空标签，并设置 clear: both; 来阻止后续内容环绕浮动元素。虽然简单直观，但会引入无意义的DOM节点，不利于语义化。
- 给父元素设置固定高度：通过为父容器显式设定 height，可避免高度塌陷。但此法不适用于内容动态变化的场景，灵活性差。
- 触发BFC（块级格式化上下文）：通过设置 overflow: hidden; 或 display: flow-root; 等属性使父元素形成BFC，从而包含内部浮动元素。这种方法简洁有效，尤其 display: flow-root; 是现代推荐做法。
- 使用伪元素 clearfix（推荐）：利用 ::before 和 ::after 伪元素结合 clear 属性，在不增加额外标签的前提下清除浮动，结构干净、兼容性好。
_clearfix 技巧详解
_clearfix 是一种通过CSS类名封装的清除浮动技术，最经典的写法如下：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
这段代码的作用是：
立即学习“前端免费学习笔记（深入）”；
- ::before 用于防止上下两个相邻块之间的外边距合并（margin collapse）；
- ::after 创建一个隐藏的块级元素并清除两侧浮动，确保父容器能包含所有浮动子元素；
- display: table; 触发匿名表格单元格行为，确保生成的内容参与布局；
- 整体无需修改HTML结构，只需为需要清除浮动的父元素添加 class="clearfix" 即可。
现代改进版 clearfix
随着浏览器支持提升，可以进一步优化上述写法：
.clearfix::after {
content: "";
display: block;
clear: both;
}
如果不需要处理 margin 合并问题，仅用 ::after 就足够了。更现代的方式是直接使用 display: flow-root;：
.clearfix {
display: flow-root;
}
该属性原生支持创建BFC，语义清晰、代码简洁，是目前最推荐的清除浮动替代方案，适用于大多数现代项目。
基本上就这些。选择哪种方式取决于项目兼容性要求和团队编码规范。传统 _clearfix 依然可靠，而 display: flow-root 则代表了未来的方向。掌握它们的原理和差异，有助于写出更健壮的CSS布局代码。
