Bootstrap 简明教程

Bootstrap - Clearfix

本章讨论了帮助类程序的 clearfix 功能。Bootstrap 中的 clearfix 功能用于清除容器内的浮动元素。当容器中的元素浮动时，容器的高度有时可能会崩溃，从而导致布局出现问题。

This chapter discusses the clearfix feature of helper classes. The clearfix feature in Bootstrap is used to clear floated elements within a container. When elements within a container are floated, the container’s height can sometimes be collapsed, causing issues with the layout.

以下是如何在 Bootstrap 中使用 .clearfix 类的示例：

Here’s an example of how to use the .clearfix class in Bootstrap:

Example

下面的示例展示了 clearfix 的用法。没有 clearfix，包装 div 将不会跨越按钮周围，这将导致布局损坏。

The example below shows the usage of clearfix. Without the clearfix, the wrapping div would not span around the buttons which would cause a broken layout.

可以使用 编辑和运行 选项编辑并尝试运行此代码。

You can edit and try running this code using the *Edit & Run * option.

<!DOCTYPE html>
<html lang="en">
    <head>
       <title>Bootstrap - Helper - Clearfix</title>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h4>Clearfix example</h4><br>
          <div class="bg-success clearfix">
          <button type="button" class="btn btn-secondary float-start">Button floated left</button>
          <button type="button" class="btn btn-secondary float-end">Button floated right</button>
          </div>
    </body>
</html>