在CSS布局中，float属性可以让元素脱离标准文档流，向左或者向右浮动，常用于实现多列布局、图文环绕等效果。但浮动元素会影响周围元素的排版，也会让父元素出现高度塌陷的问题，这时候就需要清除浮动来修复布局异常。
为什么要清除浮动
浮动元素脱离标准文档流后，不会占据原本的位置，会引发两类典型问题：
- 父元素高度塌陷：如果父元素没有设置固定高度，内部子元素全部浮动的话，父元素无法感知浮动子元素的高度，自身高度会变为0，导致父元素背景、边框等样式无法正确展示。
- 后续元素排版错乱：浮动元素之后的非浮动元素会占据浮动元素原本的位置，被浮动元素覆盖或者挤到异常位置，破坏整体布局结构。
比如下面的代码，父元素container内部有两个浮动的子元素，父元素没有设置高度，就会出现高度塌陷的问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
border: 2px solid #333;
background-color: #f0f0f0;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: #ffcccc;
}
.right {
float: left;
width: 100px;
height: 100px;
background-color: #ccffcc;
}
.next {
width: 200px;
height: 50px;
background-color: #ccccff;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左浮动</div>
<div class="right">右浮动</div>
</div>
<div class="next">后续元素</div>
</body>
</html>
运行上述代码会发现，父元素的边框只显示了一条线，高度几乎为0，后续元素next也跑到了父元素的边框上方，这就是没有清除浮动导致的典型问题。
怎样清除浮动
常见的清除浮动方法有以下几种，开发者可以根据实际场景选择使用：
1. 额外标签法
在浮动元素的最后面添加一个空的块级标签，给这个标签设置clear: both样式，清除左右两侧的浮动影响。这是最简单直观的方法，但是会添加多余的HTML标签，不符合结构与样式分离的原则。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
border: 2px solid #333;
background-color: #f0f0f0;
}
.left {
float: left;
width: 100px;
height: 100px;
background-color: #ffcccc;
}
.right {
float: left;
width: 100px;
height: 100px;
background-color: #ccffcc;
}
.clear-fix {
clear: both;
}
.next {
width: 200px;
height: 50px;
background-color: #ccccff;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左浮动</div>
<div class="right">右浮动</div>
<div class="clear-fix"></div>
</div>
<div class="next">后续元素</div>
</body>
</html>
2. 父元素设置overflow属性
给浮动元素的父元素设置overflow: hidden或者overflow: auto，可以触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被计算高度，从而解决父元素高度塌陷的问题。这种方法代码量少，但是可能会隐藏超出父元素的内容或者出现滚动条。
.container {
border: 2px solid #333;
background-color: #f0f0f0;
/* 触发BFC，清除浮动 */
overflow: hidden;
}
3. 使用伪元素清除浮动
这是目前最推荐的方法，通过给父元素添加伪元素::after，模拟额外标签的效果，不需要添加多余的HTML标签，也不会影响其他样式。核心原理是伪元素在父元素内部最后面生成一个块级元素，清除浮动。
/* 通用清除浮动类 */
.clearfix::after {
content: "";
display: block;
clear: both;
/* 兼容旧版本浏览器 */
visibility: hidden;
height: 0;
}
/* 兼容IE6、IE7 */
.clearfix {
*zoom: 1;
}
使用时只需要给父元素添加clearfix类即可：
<div class="container clearfix">
<div class="left">左浮动</div>
<div class="right">右浮动</div>
</div>
不同清除浮动方法对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| 额外标签法 | 简单易懂，兼容性好 | 添加多余标签，不符合结构与样式分离原则 |
| 父元素设置overflow | 代码简洁，无多余标签 | 可能隐藏溢出内容或产生滚动条，不适合有溢出需求的场景 |
| 伪元素清除法 | 无多余标签，兼容性好，不影响其他样式 | 需要写少量CSS代码，旧版本浏览器需要额外兼容处理 |
实际开发中，伪元素清除浮动的方法使用最广泛，能够适配绝大多数布局场景，也不会带来额外的副作用。