什么是clearfix (一文搞清楚css清除浮动clearfix)

1. 什么是clearfix？

在CSS布局中，我们经常使用浮动来实现元素的布局。但是，当父元素的高度没有被正确的包裹时（比如，当子元素都是浮动元素时），就会出现高度塌陷（collapsed）的问题。clearfix就是一种CSS技巧，可以清除浮动元素导致的高度塌陷问题。

具体来说，clearfix是一种在容器（比如一个div）中使用的CSS类名，该类名可以将浮动元素包裹在其中，避免高度塌陷的问题。

1. 如何实现clearfix？

在实现clearfix时，通常有多种方法。以下是其中的两种实现方式：

（1）利用伪类实现

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

这种方式中，我们在clearfix类上附加了一个伪类选择器::after。由于它是一个块级元素，它会在clearfix元素的最后面添加一个虚拟的空元素。接下来，我们可以使用clear属性将该空元素即clearfix元素的高度撑开，避免出现高度塌陷的问题。值得注意的是，content属性必须定义，否则伪类选择器不会生效。

示例代码：

<div class="clearfix">
    <div class="float-left">左侧浮动元素</div>
    <div class="float-right">右侧浮动元素</div>
</div>

.float-left {
    float: left;
    margin-right: 10px;
}
.float-right {
    float: right;
    margin-left: 10px;
}
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

（2）利用overflow属性实现

.clearfix {
    overflow: auto;
}

这种方式中，我们只需要在clearfix类中定义overflow属性即可。由于该属性会创建一个新的BFC（块级格式上下文），因此可以正常地包含浮动元素，避免高度塌陷的问题。

示例代码：

<div class="clearfix">
    <div class="float-left">左侧浮动元素</div>
    <div class="float-right">右侧浮动元素</div>
</div>

.float-left {
    float: left;
    margin-right: 10px;
}
.float-right {
    float: right;
    margin-left: 10px;
}
.clearfix {
    overflow: auto;
}

以上是两种常见的clearfix实现方式，可以根据实际需要灵活选择。总之，使用clearfix可以避免浮动造成的高度塌陷问题，使得网页布局更加美观和稳定。