在HTML5页面布局开发中，float属性常被用来实现多列排列、图文混排等效果，但浮动元素会脱离标准文档流，导致父元素无法感知浮动子元素的高度，出现高度塌陷问题，同时后续的非浮动元素也会受到浮动元素的影响出现位置偏移。这类浮动引发的问题如果不及时处理，会严重破坏页面整体布局效果。
常见清除浮动技巧
1. 额外标签法
这是最基础的清除浮动方式，在浮动元素的父容器内部，最后添加一个空的块级标签，给这个标签设置clear:both样式，就可以清除前面浮动元素带来的影响。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>额外标签法清除浮动</title>
<style>
.parent {
border: 1px solid #333;
width: 500px;
}
.float-left {
float: left;
width: 200px;
height: 150px;
background-color: #f0f0f0;
}
.clear-float {
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-left">浮动元素</div>
<div class="clear-float"></div>
</div>
</body>
</html>
这种方法的优点是逻辑简单，容易理解，缺点是会添加无意义的空标签，不符合HTML语义化要求，在复杂布局中会增加冗余代码。
2. 父元素设置overflow属性
给浮动元素的父容器设置overflow属性，取值为hidden、auto或者scroll，都可以触发父元素的BFC（块级格式化上下文），从而让父元素能够包含浮动子元素，清除浮动影响。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>overflow清除浮动</title>
<style>
.parent {
border: 1px solid #333;
width: 500px;
overflow: hidden; /* 触发BFC清除浮动 */
}
.float-left {
float: left;
width: 200px;
height: 150px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="parent">
<div class="float-left">浮动元素</div>
</div>
</body>
</html>
这种方法代码量少，不需要额外添加标签，但是overflow:hidden会裁剪超出父容器范围的内容，如果布局中有下拉菜单、 tooltip 等需要超出父容器显示的元素，就不适合使用这种方式。
3. clearfix伪元素法
这是目前最推荐的清除浮动方式，通过给父元素添加clearfix类，利用伪元素::after在父容器内部末尾添加一个不可见的块级元素，设置clear:both来清除浮动，既不会添加冗余标签，也不会影响其他布局效果。
通用clearfix样式代码如下：
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/* 兼容IE6、IE7 */
.clearfix {
*zoom: 1;
}
使用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>clearfix清除浮动</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
.parent {
border: 1px solid #333;
width: 500px;
}
.float-left {
float: left;
width: 200px;
height: 150px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="float-left">浮动元素</div>
</div>
</body>
</html>
这种方法符合语义化要求，不会影响其他布局功能，适配各种场景，是实际开发中最常用的清除浮动方案。
不同清除方案的选择建议
如果是简单的临时布局调试，可以使用额外标签法快速验证效果；如果父容器没有需要超出显示的内容，使用overflow属性是最简便的方式；如果是正式项目开发，优先选择clearfix伪元素法，保证代码的规范性和可维护性。
| 清除方式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 额外标签法 | 逻辑简单，易理解 | 添加无意义空标签，不符合语义化 | 临时调试、简单布局 |
| overflow属性法 | 代码量少，无需额外标签 | 会裁剪超出内容，兼容性问题 | 无超出内容的简单布局 |
| clearfix伪元素法 | 语义化好，不影响其他布局 | 需要写固定的伪元素样式 | 正式项目、复杂布局 |