css为什么要清除浮动?浮动如何清除
发布日期:2021-06-21 05:17:40 浏览次数:4 分类:技术文章

本文共 844 字,大约阅读时间需要 2 分钟。

浮动在页面中有着很大的作用,很多人在做网站的时候,都会遇到浮动的效果,但是很多人都不知道css为什么要清除浮动?以及浮动如何清除?下面我们来了解一下。

首先小编在这里谢谢大家一直的支持,每天都会更新十个web前端基础内容,需要的可以关注我,另外也可以进我的web学习交流群,领取资料学习资料笔记,可以跟里面的小伙伴一起学习一起成长,不懂的问题也可以问我,随时给大家解答。再次感谢大家。

  • 在讲css为什么要清除浮动之前,我们首先要了解一下css为什么会产生浮动,浮动产生的原因有哪些?一般情况下,我们都会使用float浮动属性,在父级盒子不能被撑开,并且之间会产生一定的距离,因此浮动就这样产生了,很多浮动效果都是使用了float:left或float:right属性而产生的浮动。

一:css为什么要清除浮动

  • 1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致margin不能正常显示,所以我们要清除浮动。
  • 2.导致背景不能显示,如果对父级设置了背景属性,导致父级不能撑开,会影响到背景图片不能正常打开。
  • 3.边框不能撑开,由于子级使用了浮动效果,并且已经产生了浮动,父级不能撑开,所以影响边框不会随着内容的变化而变化。

二:浮动如何清除?清除浮动流程

  • 1.首先对父级进行设置css高度进行清除,一般情况下,我们对高度设置一个高度,把内容高度设置成100px,上下框为2px,这样一来,父级的总体高度就是102px。我们使用高度样式,但是前提我们要计算好内容的高度。
  • 2.利用clear:both属性,进行清除浮动,我们可以在div中放入一个class="clear样式,就可以清除浮动。
  • 3.对父级div进行定义属性,我们对父级css选择器定义一个overflow:hidden样式,就可以清除父级产生的浮动。

以上就是css为什么要清除浮动?浮动如何清除的详细内容。

转载地址:https://blog.csdn.net/lin123_00/article/details/105848708 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:css实现三面立体旋转无限轮播图动画(代码示例)
下一篇:CSS实现透明度变化的动画 (淡入淡出效果)

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月20日 23时29分43秒