CSS清除浮动的三种方法【前端开发】

p.s.高产量博主，点个关注💓不迷路！

目录

I.浮动的介绍及浮动需要清除的原因

II.清除浮动方法一：额外标签法(隔墙法)

III.清除浮动方法二：父级元素添加 overflow 属性法

IV.清除浮动方法三：父级元素添加 after 伪元素法

V.清除浮动方法四：父级添加双伪元素法

---

I.浮动的介绍及浮动需要清除的原因

首先简单介绍一下浮动：

浮动官方给的定义是用于创建浮动框，使其移动到一边，直到左边缘或右边缘接触及包含块或另一个浮动框的边缘。代码格式为 float:相关属性值。属性值一共有三个，分别是 left（向左移动）、right（向右移动）、none（不浮动，默认值）。浮动简单的说就是让元素横向移动，而不再纵向移动，而方向则代表是从左边开始横着排列还是从右边开始。

再聊聊清除浮动的原因：

如果网页元素是浮动，则根据浮动的脱标性，不占有位置，那么父亲盒子就没有宽度了。当父级盒子没有高度的时候，就会影响到下面的其他标准流父盒子，从而造成重叠的错误布局。

这张图可以帮助理解浮动的影响：

本文不深挖浮动的具体布局方法及浮动影响的深层次，而是针对清除浮动的方法，因此上面的内容仅供参考，详细的资料可另查。

---

II.清除浮动方法一：额外标签法(隔墙法)

在浮动标签的末尾添加一个新的标签，并且在标签内写入 clear:both;即可实现。

此方法需要添加一个标签，因此我们不常使用，而且需要找到最后的那个浮动标签，较为麻烦，推荐后面的其他三种方法。

---

III.清除浮动方法二：父级元素添加 overflow 属性法

给父级元素添加 overflow:hidden 即可，这个方法是最简单的，但是这个有缺点:无法显示溢出的部分。

---

IV.清除浮动方法三：父级元素添加 after 伪元素法

这个方法是给父元素添加一段代码样式，这段代码样式复制黏贴即可实现浮动清除。这段代码是:

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }


        .clearfix {
            *zoom: 1;
        }

复制代码之后，别忘了给父元素添加一个类名叫 clearfix：

---

V.清除浮动方法四：父级添加双伪元素法

这个方法同理，给父元素复制一段代码即可实现功能，代码如下:

clearfix:before,
 .clearfix:after {
     content: "";
     display: table;
 }
 .clearfix:after {
     clear: both;
 }
 .clearfix {
     *zoom: 1;
 }

复制代码之后，别忘了给父元素添加一个类名叫 clearfix：

介绍完毕！🌟🌟🌟