Bootstrap Clearfix|极客教程

Bootstrap Clearfix

清除浮动（Clearfix）是在 CSS 中用于解决浮动元素引起的高度塌陷问题的一种技术。在使用 Bootstrap 框架的过程中，清除浮动技术也是一个非常重要的知识点。本文将详解 Bootstrap 中的清除浮动工具类——Clearfix。

1. 清除浮动的背景

在了解 Bootstrap 的清除浮动工具类之前，我们先来了解一下清除浮动的背景和原理。

当我们在 HTML 页面中使用浮动（float）属性，比如 float: left; 或 float: right;，会使得浮动元素脱离了正常的文档流，对其后的元素产生影响。这就会导致父元素的高度无法自适应包裹浮动元素，从而引起高度塌陷的问题。这种情况下，父元素的高度会变成 0，造成布局错乱。

为了解决这个问题，我们可以给父元素添加一些 CSS 样式，以清除与浮动元素相关的影响，使其正确显示。这一系列的处理方式被称为清除浮动。

2. Bootstrap 清除浮动工具类

Bootstrap 提供了一个名为 Clearfix 的工具类，用于清除浮动。我们可以直接在 HTML 中应用这些类，以解决浮动元素引起的布局问题。

Clearfix 类是一个官方名称，它是在 Bootstrap 的 CSS 样式表中定义的一系列相关类。这些类使用了伪元素 ::after，以及其他一些 CSS 属性和选择器，来清除浮动产生的影响。

下面是 Clearfix 类的示例代码：

<div class="clearfix">
  <div class="float-left">浮动元素 1</div>
  <div class="float-left">浮动元素 2</div>
  <div class="float-left">浮动元素 3</div>
</div>

在上面的示例中，我们给父级元素添加了 clearfix 类，并且子元素使用了 float-left 类进行左浮动。这样就能确保父元素正常包裹子元素，不出现高度塌陷问题。

3. Clearfix 类的样式定义

在 Bootstrap 的 CSS 中，Clearfix 类被定义为以下样式：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

在这个样式中，我们使用了伪元素 ::after 来添加一个空的内容，并通过 display: table; 将其转换为一个表格级容器。然后，通过 clear: both; 清除浮动的影响，使其下方的元素不受浮动元素的影响。

需要注意的是，为了使用 Clearfix 类清除浮动，父元素必须具有一个非 static 的定位属性。所以，在使用 Clearfix 时，父元素通常会添加一个 position: relative; 属性。

4. 使用范例

为了更好地理解 Clearfix 类的使用，我们来看一个具体的范例。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Clearfix Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <style>
    /* 添加外边距和宽度，以便更好地观察效果 */
    .clearfix-example {
      margin: 10px;
      width: 200px;
      border: 1px solid gray;
    }

    /* 在此处使用 Clearfix 类 */
    .clearfix-example::after {
      content: "";
      display: table;
      clear: both;
    }

    /* 浮动元素样式定义 */
    .clearfix-example .float-left {
      float: left;
      width: 50%;
    }
  </style>
</head>
<body>
  <div class="clearfix-example clearfix">
    <div class="float-left">浮动元素 1</div>
    <div class="float-left">浮动元素 2</div>
    <div class="float-left">浮动元素 3</div>
  </div>
</body>
</html>

在上面的范例代码中，我们使用了 Bootstrap 的 Clearfix 类清除浮动，以及设置了一些外观样式。当浏览器渲染该页面时，我们可以看到以下效果：