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

CSS浮动float属性用法详解(1)

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

你对CSS浮动float属性的使用是否了解，这里和大家分享一下，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
广州网站建设,网站建设,广州网页设计,广州网站设计

DIV CSS布局：CSS浮动float属性详解

在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。

float属性基本释义：

该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。

float属性的参数：

none：对象不浮动

left：对象浮在左边

right：对象浮在右边

下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如下图：

　我们看下面的运行效果：
广州网站建设,网站建设,广州网页设计,广州网站设计

SourceCodetoRun



    
	
  1. 
		 
    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=gb2312"/> 
    7. 
	
  7. 
		<title>52CSStitle> 
    8. 
	
  8. 
		<styletypestyletype="text/css"> 
    9. 
	
  9. 
		#content_a{width:200px;height:80px;border:1pxsolid#000;
    10. 
	
  10. 
		margin:10px;background:#ccc;}  
    11. 
	
  11. 
		#content_b{width:200px;height:80px;border:1pxsolid#000;
    12. 
	
  12. 
		margin:10px;background:#999;}  
    13. 
	
  13. 
		style> 
    14. 
	
  14. 
		head> 
    15. 
	
  15. 
		<body> 
    16. 
	
  16. 
		<dividdivid="content_a">52CSS.com这是第一个DIVdiv> 
    17. 
	
  17. 
		<dividdivid="content_b">52CSS.com这是第二个DIVdiv> 
    18. 
	
  18. 
		body> 
    19. 
	
  19. 
		html> 
    20. 
	
  20. 
		 
    21. 




	[可先修改部分代码再运行查看效果]


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机