css浮动是css定位属性float的取值，当给元素设置float为left或right时，元素会脱离标准文档流，向左或向右移动，直到碰到父元素边界或者其他浮动元素边缘为止。浮动最初的设计目的是实现文字环绕图片的效果，后来被大量用于多列布局的开发场景。
css浮动的核心表现
浮动元素会脱离标准文档流，这意味着它不再占据原本在文档流中的空间，后续的标准流元素会向上移动填补空缺。同时浮动元素具有包裹性，其宽度默认由内容决定，也可以通过width属性手动设置。多个浮动元素会排成一行，如果父容器宽度不够会自动换行。
我们可以通过一段简单的代码观察浮动的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
border: 2px solid #333;
}
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: #ffcccc;
margin: 10px;
}
.normal {
height: 150px;
background-color: #ccffcc;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">浮动元素</div>
<div class="normal">标准流元素，会向上填补浮动元素空出的位置</div>
</div>
</body>
</html>为什么要清除浮动
浮动虽然能方便实现布局，但也会带来两个核心问题，这也是需要清除浮动的根本原因：
- 父元素高度塌陷：如果父元素没有设置固定高度，内部子元素全部浮动后，父元素无法感知浮动元素的高度，高度会变为0，导致父元素的边框、背景等无法正常显示，也会影响后续兄弟元素的排版。
- 后续元素排版异常：浮动元素脱离文档流后，后续的标准流元素会向上移动，可能会被浮动元素覆盖，或者出现位置偏移，不符合预期的布局效果。
还是用上面的代码例子，如果去掉父容器的边框，你会发现父元素的高度直接变为0，因为两个子元素都浮动了，父元素没有内容撑开高度。
常见的清除浮动方法
1. 额外标签法
在浮动元素的最后添加一个空的块级标签，给这个标签设置clear:both属性，clear属性可以指定元素哪一侧不允许有浮动元素，both表示两侧都不允许。这种方法简单易懂，但会额外增加无意义的标签，不利于代码维护。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
border: 2px solid #333;
}
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: #ffcccc;
margin: 10px;
}
.clear-fix {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">浮动元素1</div>
<div class="float-left">浮动元素2</div>
<div class="clear-fix"></div>
</div>
</body>
</html>2. 父元素设置overflow属性
给浮动元素的父容器设置overflow: hidden或者overflow: auto，可以触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被计算高度，从而解决父元素高度塌陷的问题。这种方法代码量少，但可能会隐藏超出父容器的内容，或者出现滚动条。
.container {
width: 500px;
border: 2px solid #333;
overflow: hidden; /* 触发BFC，清除内部浮动 */
}3. 伪元素清除法
这是目前最常用的清除浮动方法，通过给父元素添加伪元素::after，设置伪元素为块级元素，再设置clear: both，不需要额外添加标签，也不会影响其他样式。通常会把这个样式封装成公共类，需要清除浮动的父元素直接添加这个类即可。
/* 公共清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
/* 以下属性是为了兼容旧版本浏览器，避免伪元素显示异常 */
height: 0;
visibility: hidden;
}
.clearfix {
/* 触发hasLayout，兼容IE低版本 */
zoom: 1;
}使用时只需要在父容器上添加clearfix类：
<div class="container clearfix">
<div class="float-left">浮动元素1</div>
<div class="float-left">浮动元素2</div>
</div>清除浮动方法对比
我们可以通过表格对比几种清除浮动方法的优缺点，方便根据实际场景选择：
| 方法 | 优点 | 缺点 |
|---|---|---|
| 额外标签法 | 简单易懂，兼容性好 | 增加无意义标签，不利于维护 |
| overflow属性法 | 代码量少，使用方便 | 可能隐藏溢出内容，出现滚动条 |
| 伪元素清除法 | 无额外标签，兼容性好，可复用 | 需要写伪元素相关样式，稍微复杂 |
在实际开发中，推荐优先使用伪元素清除法，既能解决浮动带来的问题，也不会引入额外的副作用，适合大多数布局场景。