CSS中的clear属性怎么使用

这篇文章主要介绍“CSS中的clear属性怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中的clear属性怎么使用”文章能帮助大家解决问题。

10余年的铁山港网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整铁山港建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联公司从事“铁山港网站设计”,“铁山港网站推广”以来,每个客户项目都认真落实执行。

在CSS中clear属性妙用

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

CSS clear属性

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

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

Inherited:No

继承性:无

举例

    无标题文档  .LeftText{  margin:3px;  float:left;  height:180px;  width:170px;  border:1pxsolid#B1D1CE;  background-color:#F3F3F3;  }   .FootText{  height:180px;  }   .Clear  {  clear:both;  }      区块1
 区块2
 
 区块3
  

代码说明:

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

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

关于“CSS中的clear属性怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


分享标题:CSS中的clear属性怎么使用
链接分享:http://hbruida.cn/article/iegehd.html

其他资讯