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：
介绍完毕！🌟🌟🌟
