什么是clearfix

1. 什么是clearfix？

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

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

1. 如何实现clearfix？

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

（1）利用伪类实现

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

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

示例代码：

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

.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（块级格式上下文），因此可以正常地包含浮动元素，避免高度塌陷的问题。

示例代码：

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

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