清除浮动可解决父容器高度塌陷问题，确保布局完整。当使用 float 实现多行排列时，子元素脱离文档流导致父元素无法包裹内容，需通过 clearfix 伪类、overflow: hidden 或额外清除标签等方式清除浮动。其中，.clearfix::after 添加隐藏块级元素最推荐，既不增加html负担又能稳定包含浮动项。实际应用于如响应式卡片列表中，每行多个浮动项配合 clear:both 可维持容器正确高度，避免背景或边框显示异常。尽管现代布局多用 flex/grid，但在旧项目维护中，掌握清除浮动仍是关键技能。
在使用CSS进行多行元素排列时，浮动（float）常用于实现横向布局，比如图文混排或多列布局。但浮动元素会脱离正常文档流，导致父容器无法正确包裹子元素，出现高度塌陷问题。这时就需要“清除浮动”来确保布局的完整性。
为什么需要清除浮动
当多个元素设置 float: left 或 float: right 排列在一行或多行时，它们不再占据父容器的高度空间。如果父元素没有设定固定高度，其高度将变为0，背景、边框等样式无法正确显示，影响整体布局结构。
常见的清除浮动方法
以下是几种实用且兼容性良好的清除浮动方式：
● 使用伪类 :after 清除浮动（推荐）
通过给父容器添加一个隐藏的块级元素来清除浮动，最常用的是“clearfix”技巧：
.clearfix::after {
content: "";
display: block;
clear: both;
}
将这个类应用到浮动元素的父级即可解决高度塌陷问题。
● 给父元素设置 overflow: hidden
这种方法简单直接：
.parent {
overflow: hidden; /* 触发BFC，包含浮动子元素 */
}
注意：如果子元素有超出父容器的内容（如弹出菜单），可能会被裁剪。
● 添加额外的清除元素
在浮动元素末尾添加一个空元素并清除浮动：
<div class="float-left">内容1</div> <div class="float-left">内容2</div> <div style="clear:both;"></div>
虽然有效，但增加了无意义的HTML标签，不推荐现代开发使用。
在多行排列中的实际应用场景
假设我们要实现一个响应式的图片列表，每行最多显示3个卡片，用浮动实现排列：
.card {
float: left;
width: 30%;
margin: 1.5%;
}
每行三个卡片加外边距自动换行。但由于所有 .card 都是浮动的，其父容器可能高度为0。此时应用 clearfix：
.card-group {
width: 100%;
}
.card-group::after {
content: "";
display: block;
clear: both;
}
这样每一组卡片都能被父容器完整包裹，背景色和边距表现正常。
基本上就这些。清除浮动虽是老技术，但在仍使用 float 布局的项目中非常关键，尤其在多行排列场景下能有效避免布局错乱。现代布局更多采用 Flex 或 Grid，但在维护旧项目或特定需求中，掌握清除浮动仍是必备技能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
