clearfix清除浮动进化史

清除浮动指的是当一个元素被设置为浮动后，它周围的元素可能会受到影响，导致布局紊乱或内容溢出。为了解决这个问题，在HTML和CSS发展的历程中，出现了很多清除浮动的方法，其中最常用的方法之一就是clearfix。

一、clearfix的由来

在讲解clearfix之前，我们先来了解一下浮动的概念。浮动是CSS布局中比较常用的一种技术，它能够将一个元素从文档的正常流中移动，使得其他元素围绕着它进行排布。这种排布方式可以使得页面布局更加灵活多样化。

但是，浮动也存在一些问题。当一个元素被设置为浮动后，它的父元素就无法撑开高度，导致父元素的其他内容紊乱或者溢出。为了解决这个问题，Web开发者们使用了很多清除浮动的方法，其中最知名的就是clearfix了。

clearfix最早是由浮动的发明者Dave Shea在2001年提出的。当时，Dave Shea在设计一个网页时，发现页面中一个带浮动的元素，它的父元素的高度无法自适应，导致页面布局混乱。于是，他想到了一种解决办法：在父元素的CSS代码中添加一些属性，让父元素的高度能够自适应。

二、clearfix的实现方法

1、使用额外的HTML元素+CSS方法

通常，我们可以通过在父元素中添加一些额外的HTML元素（如：div或span），然后通过CSS方法清楚浮动。以下是一个例子：

```html

```

```css

.clearfix::after {

display: table;

content: "";

clear: both;

}

.float-left {

float: left;

}

```

上述代码中，我们在父元素clearfix里添加了一个伪元素after，然后对它设置display:table，这样可以让它占据一个整个的行的宽度。接着，我们通过content属性添加了一个空字符串，然后把clear属性设置为both，这样就可以让after伪元素在浮动元素下方。当元素设置clear:both时，它将会在上一个浮动元素下方开始渲染自己。

2、使用CSS伪类方法

随着CSS的发展，我们也可以通过CSS伪类方法来实现clearfix。以下是一个例子：

```html

```

```css

.clearfix:after {

content: "";

display: table;

clear: both;

}

.float {

float: left;

}

```

这个方法同样是通过在父元素中添加伪元素after，然后利用.clearfix:after和.clearfix:before选择器清除浮动。

三、clearfix的案例说明

接下来，我们将列举一些clearfix的案例，让大家更好地理解它的应用场景和使用方法。

1、图片排列

在Web页面开发中，我们经常需要对多张图片进行排列，以下是一个例子：

```html

```

下图是没有clearfix时的情况：


由于图片浮动，导致父元素的高度无法自适应，影响了下方内容的布局。而通过使用clearfix，可以让父元素的高度自适应，如下图所示：


2、水平导航

以下是一个水平导航条的HTML代码：

```html

• 主页
• 关于我们
• 联系我们
• 产品中心

```

我们需要使用CSS样式让导航条水平排列，但是当其中一个元素浮动之后，导致整个导航条混乱。通过使用clearfix，可以保证导航条的布局不会被浮动元素影响，如下图所示：


3、三栏式布局

三栏式布局是比较常用的一种布局。以下是一个三栏式布局的HTML代码：

```html

```

由于左边栏和右边栏都浮动了，导致中间栏的位置不正确。通过使用clearfix，可以使三栏式布局变得更加稳定，如下图所示：


综上，clearfix清除浮动已经成为CSS开发的基本技巧之一，可以解决多种浮动带来的布局问题。无论是在图片排列、水平导航还是三栏式布局中，clearfix都有着重要的应用。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/