Home思洋影视事业部网站建设知识库
0 Comments

clear属性在CSS中的妙用

发布于：2013-08-09  |   作者：广州网站建设  |   已聚集：人围观

这里向大家描述一下在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. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"
    6. 
	
  6. 
		content="text/html;charset=utf-8"/> 
    7. 
	
  7. 
		<title>无标题文档</title> 
    8. 
	
  8. 
		<styletypestyletype="text/css"> 
    9. 
	
  9. 
		.LeftText{  
    10. 
	
  10. 
		margin:3px;  
    11. 
	
  11. 
		float:left;  
    12. 
	
  12. 
		height:180px;  
    13. 
	
  13. 
		width:170px;  
    14. 
	
  14. 
		border:1pxsolid#B1D1CE;  
    15. 
	
  15. 
		background-color:#F3F3F3;  
    16. 
	
  16. 
		}  
    17. 
	
  17. 
		 
    18. 
	
  18. 
		.FootText{  
    19. 
	
  19. 
		height:180px;  
    20. 
	
  20. 
		}  
    21. 
	
  21. 
		 
    22. 
	
  22. 
		.Clear  
    23. 
	
  23. 
		{  
    24. 
	
  24. 
		clear:both;  
    25. 
	
  25. 
		}  
    26. 
	
  26. 
		</style> 
    27. 
	
  27. 
		</head> 
    28. 
	
  28. 
		 
    29. 
	
  29. 
		<body> 
    30. 
	
  30. 
		<divclassdivclass="LeftText">区块1</div> 
    31. 
	
  31. 
		<divclassdivclass="LeftText">区块2</div> 
    32. 
	
  32. 
		<divclassdivclass="Clear"></div> 
    33. 
	
  33. 
		<divclassdivclass="FootText">区块3</div> 
    34. 
	
  34. 
		</body> 
    35. 
	
  35. 
		</html> 
    36. 
	
  36. 
		 
    37. 




	代码说明：



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



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

	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机