清除浮动是确保多列布局稳定的关键，因浮动元素脱离文档流会导致父容器高度塌陷。常用方法包括：使用伪元素::after添加clear:both，通过overflow:hidden触发BFC，或在HTML中插入clear:both的空元素。其中伪元素法最推荐。现代布局建议采用Flexbox或Grid，可天然包含子元素，避免浮动问题，但在兼容旧项目时仍需掌握清除浮动技巧。
在多列布局中，浮动（float）常用于实现并排排列的列，比如两栏或三栏布局。但使用浮动会导致父容器无法正确包裹子元素，造成高度塌陷，影响后续内容的排版。因此，清除浮动（clear float）是确保布局稳定的关键步骤。以下是CSS清除浮动在多列布局中的常见应用实践。
为什么需要清除浮动
当一个容器内的子元素使用了 float: left 或 float: right 后，这些子元素会脱离正常的文档流，导致父容器无法感知其高度，从而出现高度为0的情况。这会使后面的元素“挤”上来，破坏页面结构。
例如：在一个两列布局中，左右两个列都设置了左浮动，若不清除浮动，父容器将不包含它们的实际高度。
常见的清除浮动方法
以下是几种在多列布局中有效清除浮动的方式：
立即学习“前端免费学习笔记（深入）”；
● 使用伪元素 ::after（推荐）这是目前最主流、最干净的方法。通过在父容器上添加一个伪元素，并设置清除浮动，来闭合浮动流。
CSS 示例：
.container::after {
content: "";
display: table;
clear: both;
}
只要给多列的父容器加上这个样式，就能有效包含所有浮动子元素。
● 使用 overflow 属性给父容器设置 overflow: hidden 或 overflow: auto 可触发BFC（块级格式化上下文），从而包含浮动元素。
CSS 示例：
.container {
overflow: hidden;
}
优点是代码简洁，但需注意可能裁剪掉绝对定位元素或阴影等溢出内容。
● 添加额外的清除元素在HTML中插入一个空元素并设置 clear: both，如：
<div class="column-left">左侧列</div> <div class="column-right">右侧列</div> <div style="clear:both;"></div>
虽然有效，但增加了无意义的DOM节点，不符合语义化原则，现已较少使用。
现代布局中的替代方案
随着CSS Flexbox和Grid布局的普及，浮动已不再是实现多列布局的首选方式。
例如，使用Flex布局可完全避免浮动问题：
.container {
display: flex;
}
.column-left {
flex: 1;
}
.column-right {
flex: 1;
}
Flex布局天然包含子元素，无需清除浮动，且更灵活易控。
如果项目支持现代浏览器，建议优先使用Flex或Grid代替浮动布局。但在维护旧项目或需要兼容老版本IE时，掌握清除浮动的技巧仍十分必要。
基本上就这些，关键是在使用浮动时始终记得闭合它，保持布局的完整性。
