清除浮动是为解决父容器因子元素浮动导致的高度塌陷问题，经典方法是使用 clearfix 伪元素插入隐藏清除块，强制父容器包含浮动项；现代推荐方案则优先采用 Flexbox 或 CSS Grid 布局，从根本上避免浮动布局缺陷，提升维护性与响应性。
当使用浮动（float）布局创建卡片或网格时，常会遇到父容器无法正确包裹浮动子元素的问题，导致布局错乱。这是因为浮动元素脱离了正常的文档流，父元素“塌陷”，高度变为0。解决这个问题的经典方法之一就是使用 clear: both 配合伪元素实现 .clearfix 技术。
为什么需要清除浮动？
假设你有一组卡片使用 float: left 排列，它们的父容器没有设定固定高度。由于每个卡片内容不同，高度可能不一致。此时父容器不会自动扩展去包含这些浮动元素，造成后续元素“上移”到空白区域，破坏页面结构。
使用 .clear::after 清除浮动
通过在父容器末尾插入一个隐藏的清除元素，强制父容器延伸到底部。常用方式是定义一个通用的 clearfix 类：
.clearfix::after {
content: "";
display: table;
clear: both;
}
将这个类应用到包含浮动卡片的父容器上：
立即学习“前端免费学习笔记（深入）”；
<div class="card-group clearfix"> <div class="card" style="float: left; width: 30%;">卡片1</div> <div class="card" style="float: left; width: 30%;">卡片2</div> <div class="card" style="float: left; width: 30%;">卡片3</div> </div>
这样父容器就能正确包含所有浮动子项，避免高度塌陷。
现代替代方案（推荐）
虽然 clearfix 方法兼容性好，但现在更推荐使用更现代的布局方式，避免依赖浮动：
- Flexbox 布局：用 display: flex 替代 float，自动处理对齐和高度问题。
- CSS Grid：使用 display: grid 创建响应式卡片网格，无需清除浮动。
- overflow: hidden：在父元素设置该属性也能触发 BFC，包含浮动，但可能裁剪内容。
基本上就这些。如果你还在维护老项目或必须使用浮动，.clearfix 是可靠的选择。新项目建议优先考虑 Flex 或 Grid 布局，从根本上避免浮动带来的问题。
