这里向大家描述一下在CSS中clear属性妙用，图片和文字元素出现在另外元素中，那么它们(图片和文字)可称为浮动元素(floatingelement)。使用clear属性可以让元素边上不出现其它浮动元素。


在CSS中clear属性妙用


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


CSS clear属性


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


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


Inherited:No


继承性：无


举例

​



  1.     <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"    
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3.     <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">   
  4.     <head>   
  5.     <metahttp-equivmetahttp-equiv="Content-Type"  
  6.     content="text/html;charset=utf-8"/>   
  7.     <title>无标题文档</title>   
  8.     <styletypestyletype="text/css">   
  9.     .LeftText{    
  10.     margin:3px;    
  11.     float:left;    
  12.     height:180px;    
  13.     width:170px;    
  14.     border:1pxsolid#B1D1CE;    
  15.     background-color:#F3F3F3;    
  16.     }    

  18.     .FootText{    
  19.     height:180px;    
  20.     }    

  22.     .Clear    
  23.     {    
  24.     clear:both;    
  25.     }    
  26.     </style>   
  27.     </head>   

  29.     <body>   
  30.     <divclassdivclass="LeftText">区块1</div>   
  31.     <divclassdivclass="LeftText">区块2</div>   
  32.     <divclassdivclass="Clear"></div>   
  33.     <divclassdivclass="FootText">区块3</div>   
  34.     </body>   
  35.     </html>   



代码说明：


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


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