在CSS布局开发过程中，当父容器内部的所有子元素都设置了浮动属性时，父容器会因为无法感知浮动元素的高度而出现高度塌陷的问题，这会影响后续元素的正常排版。clearfix技巧是解决这个问题的核心方案，通过特定的CSS规则可以让父容器自动撑开高度，适配内部浮动元素的内容。
浮动导致父容器塌陷的原因
CSS中的浮动元素会脱离常规文档流，父容器在计算自身高度时，默认只会计算常规文档流中的子元素高度，浮动元素的高度不会被计入其中。当父容器内所有子元素都浮动时，父容器内部没有常规文档流的子元素，就会出现高度为0的塌陷情况。
我们可以通过下面的示例代码复现这个问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
border: 2px solid #333;
width: 300px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">浮动子元素</div>
<div class="child">浮动子元素</div>
</div>
</body>
</html>
运行上述代码后，父容器的边框会收缩成一条线，无法包裹住两个浮动的子元素，这就是典型的父容器塌陷问题。
clearfix技巧的实现原理
clearfix技巧的核心是利用CSS的clear属性，在父容器的末尾添加一个不可见的元素，该元素会清除左右两侧的浮动，从而让父容器能够感知到浮动元素的高度，自动撑开自身。
早期的实现方式是在父容器内部添加一个额外的空div元素，设置clear: both属性，但这种写法会额外增加DOM节点，不符合语义化要求。后来发展出的伪元素实现方式不需要额外添加DOM节点，是目前主流的clearfix写法。
常用clearfix代码实现
通用clearfix写法
下面的代码是兼容性较好的通用clearfix实现，适配大多数现代浏览器：
/* 通用clearfix类 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
/* 兼容IE6/IE7 */
.clearfix {
*zoom: 1;
}
上述代码中，::before伪元素设置display: table是为了防止子元素设置上边距时出现外边距合并的问题，::after伪元素设置clear: both来清除浮动，让父容器能够获取到浮动元素的高度。
简化版clearfix写法
如果不需要兼容过旧的IE浏览器，可以使用更简化的写法：
.clearfix::after {
content: "";
display: block;
clear: both;
}
clearfix技巧实战应用
我们将之前的塌陷示例代码修改，给父容器添加clearfix类，就可以解决高度塌陷问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
border: 2px solid #333;
width: 300px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: #f0f0f0;
margin: 10px;
}
/* 引入clearfix样式 */
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="child">浮动子元素</div>
<div class="child">浮动子元素</div>
</div>
</body>
</html>
运行修改后的代码，父容器的边框会正常包裹住两个浮动子元素，高度自动适配子元素的总高度，塌陷问题得到解决。
其他替代解决方案
除了clearfix技巧，还有以下几种方式可以解决父容器无法撑开的问题：
- 给父容器设置固定的高度，但这种方式无法适配动态内容，灵活性较差
- 给父容器设置
overflow: hidden或者overflow: auto属性，触发父容器的BFC（块级格式化上下文），让父容器能够感知浮动元素的高度，但这种方式可能会隐藏超出父容器的内容或者出现滚动条 - 父容器也设置浮动属性，但这种方式会影响父容器后续元素的排版，需要额外处理后续元素的浮动问题
对比来看，clearfix技巧不需要修改父容器的原有布局属性，也不会产生额外的副作用，是解决浮动元素撑开父容器问题的最优方案。