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

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：

---

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取

[外链图片转存中…(img-oodqFvXG-1713477968210)]