浮动问题导致父容器无法包裹子元素， clearfix 通过伪元素插入并清除浮动来解决，推荐写法为 .clearfix::before, .clearfix::after { content: ""; display: table; } 和 .clearfix::after { clear: both; }，将其应用于父容器即可有效闭合浮动，恢复正常布局。
当元素使用了 float 属性后，会导致父容器无法正确包裹子元素，造成布局塌陷。这就是常说的“浮动问题”。解决这个问题的关键是清除浮动。其中，clearfix 是最常用且高效的解决方案之一。
什么是CSS浮动带来的问题
浮动元素脱离正常文档流，父容器在计算高度时会忽略它们，导致背景、边框显示异常，后续元素位置错乱。
例如：
.container { background: #eee; }
.box { float: left; width: 100px; height: 100px; }
此时 .container 的高度可能为 0，尽管里面有两个浮动的 .box 元素。
立即学习“前端免费学习笔记（深入）”；
clearfix 原理与标准写法
clearfix 利用伪元素 ::before 和 ::after 在容器内部插入内容并清除浮动，从而撑起父容器。
推荐的标准 clearfix 写法：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
将 clearfix 类应用到需要包含浮动子元素的父容器上即可生效。
其他清除浮动的方法对比
除了 clearfix，还有几种常见方式，各有适用场景：
- 给父元素设置高度：简单直接，但不灵活，内容变化时易出问题。
- 额外空标签 + clear:both：在浮动元素后添加 ，结构冗余，不推荐。
- overflow 方法：给父元素设置 overflow: hidden 或 auto，可触发BFC包含浮动，但可能裁剪内容或影响滚动。
- Flex 或 Grid 布局替代：现代布局中，使用 display: flex 或 grid 可避免浮动，从根本上解决问题。
实际应用建议
在传统浮动布局中，clearfix 是最佳选择。可以将其定义为通用类，按需使用。
示例：
这样容器就能正确包裹两个浮动子元素。
基本上就这些。clearfix 简洁有效，理解其原理后，在维护旧项目或小范围布局时依然非常实用。
