温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

clear属性在CSS中的作用

发布时间:2021-08-07 16:44:57 来源:亿速云 阅读:208 作者:chen 栏目:web开发

本篇内容介绍了“clear属性在CSS中的作用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在CSS中clear属性妙用

在DIV+CSS设计网页中,经常需要设置多个DIV并列排列,往往是使用float:left或float:right来实现,但问题出现了,当前面并列的多个DIV总宽度不足100%,下面的的DIV就很可能向上提,和上一行的并列的DIV在同一行,这不是我们想要的结果。使用Clear属性正好可以解决这一问题,下面引用帮助的介绍:

CSS clear属性

Imageandtextelementsthatappearinanotherel  ementarecalledfloatingelements.  Theclearpropertysetsthesideso  fanelementwhereotherfloatingelementsarenotallowed.

图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。

Note:Thispropertydoesnotalwaysworkasexpectedifitisusedalongwiththe"float"property.
注意:当这个属性随着"float"属性一起使用的话,那么结果可能会不尽如人意

Inherited:No

◆继承性:无

◆可用值

clear属性在CSS中的作用

举例

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档title> <styletypestyletype="text/css"> .LeftText{  margin:3px;  float:left;  height:180px;  width:170px;  border:1pxsolid#B1D1CE;  background-color:#F3F3F3;  }   .FootText{  height:180px;  }   .Clear  {  clear:both;  }  style> head>  <body> <divclassdivclass="LeftText">区块1div> <divclassdivclass="LeftText">区块2div> <divclassdivclass="Clear">div> <divclassdivclass="FootText">区块3div> body> html>

◆代码说明:

如果没有Clear这一层,“区块3”会紧接区块2并列在同一行。

加了Clear这一层后,会把上面的浮动DIV的影响清除,使其不至影响下面DIV的布局

“clear属性在CSS中的作用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI