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

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

目录

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

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

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

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

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

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

首先简单介绍一下浮动：

再聊聊清除浮动的原因：

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

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

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：

介绍完毕！🌟🌟🌟