clearfix清除浮动进化史

Clearfix 是一个 CSS 技巧，用于清除应用于父元素的浮动，并使其子元素紧密排列在父元素内部。

## 进化史

在 CSS 2.1 标准之前，清除浮动是一个很麻烦的事情，需要将一个额外的空 div 元素插入到浮动元素之后，并为其添加 `clear: both` 属性。

```

```

这种方法不仅不够优雅，而且增加了额外的 HTML 代码，过多的 HTML 代码潜在地增加了页面加载时间并增加了代码的维护成本。

在这之后，一种叫做 `overflow: hidden` 的方法出现了，并且逐渐成为清除浮动的最常见方式。

```

```

这种方法可以工作，但是当子元素超出父元素的范围时，子元素的内容将被裁剪。这是因为 `overflow: hidden` 属性会将任何溢出的内容隐藏，无论是否与父元素重叠。

更好的解决方法是使用 clearfix。

## 使用方法

清除浮动最常用的方法是将 clearfix 类应用于浮动父元素。清除浮动可以通过添加 `clear: both` 属性或使用伪元素来实现。这里我们将展示两种常见的 clearfix 方法：

### 外部 clearfix

外部 clearfix 是给浮动父元素之后，添加一个空的带有 `clear: both` 属性的块级元素。

```

```

CSS 代码：

```

.clearfix::after {

content: '';

display: block;

clear: both;

}

```

该 CSS 代码使用了伪元素 `::after`，并在其中添加了 `content` 属性，这是一个必需的属性，否则伪元素不会被渲染。`display: block` 使伪元素在新行上开始，`clear: both` 清除任何先前的浮动。

### 内部 clearfix

内部 clearfix 是直接在浮动父元素上添加 clearfix 标记。在此方法中，我们给父元素添加 `overflow: auto`，使其成为一个包含块级格式化上下文。BFC 不允许溢出元素的内容溢出其边界盒子，因此内容总是保持在该元素的内部。

```

```

CSS 代码：

```

.clearfix {

overflow: auto;

}

```

当子元素浮动时，相对于父元素的边界框，父元素也将浮动，因此它的高度将为零。通过清除在父元素上添加 `overflow: auto`，该元素成为一个包含块级格式化上下文，其高度将自动适应其内容。

## 案例说明

现在让我们看几个使用 clearfix 的具体案例：

### 1. 两列布局

在两列布局中，我们通常使用一个带有浮动属性的左侧列和一个没有浮动属性的右侧列。在此示例中，我们使用外部 clearfix。

HTML 代码：

```

```

CSS 代码：

```

.wrapper {

border: 1px solid #ccc;

}

.left {

float: left;

width: 50%;

background-color: #f2f2f2;

}

.right {

background-color: #fff;

}

```

在这个例子中，`.clearfix` 类用于 `.wrapper` 父元素，并包含两个子元素`.left` 和 `.right`。左侧视图具有 `float: left` 样式，这使得它从页面中流出，并允许右侧视图围绕它流动。

### 2. 图片列表

在一个图片列表中，所有图片通常会浮动，而父元素可能需要一个 `clearfix` 来清除它们的浮动。在此示例中，我们使用内部 clearfix。

HTML 代码：

```

```

CSS 代码：

```

.image-list img {

float: left;

margin: 10px;

width: 200px;

height: 200px;

object-fit: cover;

}

```

在这个例子中，`.clearfix` 类用于 `.image-list` 父元素，它包含三个浮动图像。由于父元素没有定义高度，子元素默认具有零高度。因此，我们在 `.image-list` 上设置 `overflow: auto`，以便父元素扩展以适用其所有子元素。

## 结论

Clearfix 是清除浮动的重要技巧，用于确保子元素与父元素的自然布局，而不会受到浮动的影响。它可以通过使用外部 clearfix 或内部 clearfix 实现。有了 clearfix，我们可以简单地清除浮动，而不必添加额外的结构或 CSS，因此可以减少 HTML 代码的复杂性和维护成本。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/