清除浮动方法
CSS 清除浮动的三种常用方式：clearfix、overflow、额外标签
问题
当子元素浮动后，父元素会发生高度塌陷。如何清除浮动，让父元素正确包裹浮动子元素？
解答
问题演示
<div class="parent">
<div class="child">浮动元素</div>
</div>
<!-- 父元素高度为 0，无法包裹子元素 -->
<style>
.child {
float: left;
width: 200px;
height: 100px;
background: lightblue;
}
</style>方法一：clearfix 伪元素（推荐）
/* 最常用的清除浮动方案 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* 兼容 IE6/7 的完整写法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 触发 hasLayout */
}<div class="parent clearfix">
<div class="child">浮动元素</div>
</div>方法二：overflow
/* 触发 BFC，使父元素包裹浮动子元素 */
.parent {
overflow: hidden; /* 或 auto */
}<div class="parent">
<div class="child">浮动元素</div>
</div>方法三：额外标签
<div class="parent">
<div class="child">浮动元素</div>
<!-- 在浮动元素后添加空标签 -->
<div style="clear: both;"></div>
</div>完整示例
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
border: 2px solid red;
margin-bottom: 20px;
}
.child {
float: left;
width: 150px;
height: 80px;
background: lightblue;
margin: 10px;
}
/* clearfix 方案 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
/* overflow 方案 */
.overflow-fix {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 未清除浮动：父元素高度塌陷 -->
<div class="parent">
<div class="child">未清除</div>
</div>
<!-- clearfix 方案 -->
<div class="parent clearfix">
<div class="child">clearfix</div>
</div>
<!-- overflow 方案 -->
<div class="parent overflow-fix">
<div class="child">overflow</div>
</div>
<!-- 额外标签方案 -->
<div class="parent">
<div class="child">extra tag</div>
<div style="clear: both;"></div>
</div>
</body>
</html>方法对比
| 方法 | 优点 | 缺点 |
|---|---|---|
| clearfix | 语义清晰，无副作用 | 需要额外 CSS |
| overflow | 代码简洁 | 可能裁剪内容或出现滚动条 |
| 额外标签 | 简单直接 | 增加无意义 DOM |
关键点
- clearfix 是最佳实践：通过伪元素在浮动元素后插入清除块，不影响 DOM 结构
- overflow 原理是触发 BFC：BFC 会包含内部浮动元素，但可能产生裁剪副作用
- clear: both 的作用：让元素移动到之前所有浮动元素的下方
- 现代布局优先用 Flexbox/Grid：新项目建议直接使用 Flex 或 Grid，避免浮动布局
目录