在CSS布局开发过程中，当我们给容器内的子元素设置float属性后，子元素会脱离标准文档流，此时如果父元素没有设置固定高度，就会出现父元素高度无法被子元素撑开的高度塌陷问题，同时还可能伴随浮动元素溢出父容器的布局异常。这种问题在传统的浮动布局中非常常见，需要开发者掌握正确的清除浮动方法才能解决。
浮动导致父元素溢出的原理
标准文档流中的元素会按照默认规则排列，父元素的高度默认会被内部的内容撑开。但是当子元素设置浮动后，会脱离标准文档流，父元素在计算自身高度时会忽略这些浮动子元素，因此如果父元素没有其他内容或者固定高度，就会出现高度为0的高度塌陷情况，视觉上就表现为浮动元素超出了父元素的边界，出现溢出问题。
clearfix清除浮动的实现方式
clearfix是业内通用的清除浮动类名，通过给父元素添加这个类，就可以在不额外添加冗余DOM元素的情况下解决高度塌陷和溢出问题，核心原理是在父元素的末尾生成一个看不见的块级元素，强制让这个元素清除左右浮动，从而把父元素的高度撑开。
传统clearfix写法
传统的clearfix实现方式是在父元素内部最后添加一个额外的块级元素，设置clear属性，但是这种方式需要额外添加DOM，不够优雅，现在更常用的是伪元素实现方式。
/* 传统额外元素清除浮动 */
.clearfix-fix {
clear: both;
}
/* 在父元素最后添加<div class="clearfix-fix"></div> */
伪元素clearfix写法（推荐）
通过父元素的after伪元素来模拟额外添加的清除浮动元素，不需要修改HTML结构，是目前最主流的clearfix实现方案，兼容性和实用性都更好。
.clearfix::after {
content: "";
display: block;
clear: both;
/* 以下属性是为了兼容老版本浏览器，避免伪元素产生额外空间 */
height: 0;
visibility: hidden;
}
/* 如果需要兼容IE6/IE7，可以添加以下属性 */
.clearfix {
*zoom: 1;
}
其他清除浮动的方法对比
除了clearfix之外，还有一些其他的清除浮动方式，我们可以根据实际场景选择使用：
- 给父元素设置固定高度：直接给父元素设置明确的高度值，这样即使子元素浮动，父元素也不会塌陷，但是这种方式不够灵活，如果子元素高度变化就需要手动调整父元素高度，不适合动态内容的场景。
- 给父元素设置overflow属性：给父元素设置overflow: hidden或者overflow: auto，触发父元素的BFC（块级格式化上下文），BFC内部的浮动元素会被计算高度，从而解决塌陷问题。但是这种方式可能会导致超出父元素的内容被隐藏，或者出现不必要的滚动条，需要根据场景判断。
- 给父元素也设置浮动：让父元素也脱离标准流，这样父元素会包裹住内部的浮动子元素，但是会导致父元素脱离标准流，影响后续元素的布局，一般不建议使用。
实际使用示例
下面是一个简单的示例，展示使用clearfix解决浮动溢出的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>clearfix清除浮动示例</title>
<style>
.parent {
border: 2px solid #333;
width: 500px;
}
.child {
float: left;
width: 150px;
height: 100px;
background-color: #f0f0f0;
margin-right: 10px;
}
/* 未添加clearfix时，父元素高度为0，边框收缩 */
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<!-- 有clearfix的父元素，高度会被子元素撑开 -->
<div class="parent clearfix">
<div class="child">浮动子元素1</div>
<div class="child">浮动子元素2</div>
</div>
<p>父元素下方的文本内容，不会和浮动元素重叠</p>
</body>
</html>
在实际开发中，优先推荐使用伪元素实现的clearfix方案，既不需要修改HTML结构，也不会带来额外的布局副作用，能够稳定解决浮动元素溢出和父元素高度塌陷的问题。