如何正确地使用clearfix来消除浮动

发布时间：2023-05-16

浮动是CSS中一个重要的布局属性，可实现元素的左、右对齐，使文本或图片环绕在其他元素周围，增加页面的美观性。然而浮动还有可能带来意想不到的问题，例如元素脱离文档流导致其他元素位置异常等，这时就需要使用清除浮动（clearfix）来解决这个问题。

一、什么是clearfix?

clearfix是一种CSS技巧，可以解决使用浮动属性后，由于高度坍塌造成的容器不能自适应问题。简单来说，就是通过在使用浮动属性的元素外包裹一个带有clear属性的伪元素，来使得容器恢复自己高度。clearfix的实现主要有以下两种方法： 第一种方法是使用 :after 伪元素清除浮动，代码如下：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;  /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}

这种方法使用了CSS3的 :before 和 :after 伪元素来清除浮动，其中 content 属性用于在 .:before 和 :after 伪元素中生成内容。display: block 属性使生成的元素以块级元素显示，height: 0 高度设为0，clear: both 则是取消浮动。同时，为了解决IE低版本浏览器的bug，在外层容器设置 zoom: 1 触发“hasLayout”，修复ie6、ie7浮动问题。 第二种方法是使用 overflow 属性清除浮动，代码如下：

.clearfix {
    overflow: hidden;
    zoom: 1;  /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}

这种方法通过首先给容器添加 overflow: hidden 或其他非visible的属性，使得浮动元素不会超出自身的容器，然后再触发其中包含浮动元素的父容器的BFC，产生了一种类似于清除浮动的效果。缺点是会产生内容截断现象，因此需要注意。

二、clearfix 的实际应用

clearfix经常被用于解决浮动元素引起的高度塌陷问题，它可以在多种布局场景下被使用，例如固定宽度的浮动元素，自适应宽度的浮动元素等等，下面我们分别介绍这些场景下clearfix如何使用。

1. 固定宽度的浮动元素

在设置宽度的情况下，使用clearfix非常方便，只需要将包含所有浮动元素的容器添加 clearfix class即可，示例代码如下：

<div class="container clearfix">
  <div class="float-left">左侧内容</div>
  <div class="float-right">右侧内容</div>
</div>

其中，.float-left 和 .float-right 分别为左右浮动元素的类名，.clearfix 定义如下：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;  /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}

如果需要设置浮动元素的宽度，只需要加上 width 属性即可：

.float-left {
    float: left;
    width: 50%;
}
.float-right {
    float: right;
    width: 50%;
}

2. 自适应宽度的浮动元素

当浮动元素的宽度不定时，使用clearfix也很方便。通常是在浮动元素后面添加一个空 div 标签，定义clearfix属性，代码如下：

<div class="container">
  <div class="float-left">左侧内容</div>
  <div class="float-right">右侧内容</div>
  <div class="clearfix"></div>
</div>

其中，.container 为包含所有浮动元素的容器，.float-left 和 .float-right 分别为左右浮动元素的类名，.clearfix 定义如下：

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;  /*IE低版本浏览器触发“hasLayout”，修复ie6、ie7浮动问题*/
}

三、clearfix 的局限性和注意事项

虽然clearfix是一个简单易用的方法来清除浮动的约束，但有时也会带来一些局限性与注意事项：

1. 兼容性问题

虽然clearfix已广泛应用于CSS布局中，但是在兼容各种浏览器时，我们仍然需要谨慎考虑，特别要注意 IE的各种版本中与浮动有关的怪异现象。

2. 增加HTML标签

在使用clearfix时，为了让容器正常显示，我们需要在HTML代码中增加对应的标签元素，而且还不利于SEO优化。

3. 清除多个浮动元素的影响

如果需要清除多个浮动元素对其他元素的影响，我们需要将这些元素全部定义为clearfix，这将增加样式代码的复杂度。

4. 相对布局的问题

对于相对定位（relative）的浮动元素，在使用clearfix时可能出现“重叠bug”，需要调整浮动元素的位置来避免这种情况。

结语

clearfix是解决浮动问题的非常有效的方法，能够使包含浮动元素的容器正常显示，提升页面的美观度和用户体验。但是在使用时需要根据实际情况综合考虑，选择最合适的方法来清除浮动，避免造成不必要的麻烦。

推荐文章