css定位和浮动

本篇文章主要写的是css中的浮动和定位布局，让刚入前端不明白布局的刻印轻松掌握这两个方面的布局，并且还有简单的万花筒代码和淘宝商品展示布局代码演示

定位：

css中常见的定位有相对和绝对定位。说到定位，就从它的属性position说起。在css中属性position的值有6个，学好这6个值，对定位就会有基本的掌握。重点通过它的属性值来介绍定位的了解。

position属性值：

• relative：1.  相对定位，元素框相对于正常文档流发生偏移，本元素的原来的位置就会被占掉。

                     2.  在布局中的最常使用，使一个元素变成父元素，然后给自己的子元素一个absolute绝对定位，就可以让子元素相 对于父元素任意排版

• absolute：1.  绝对定位。设置这个属性值的元素其元素框不在占有文档流。但是原来的位置不能被其他元素占有。

                       2.  常见引用，和relative结合使用，使一个元素相变成一个元素的子元素，这让他进行定位，设置排版  

  realtive和absolute两个属性值结合使用是最常用的，让子元素相对于父元素进行布局。在立体旋转，万花筒就有这种使用 

这是一个简单的万花筒效果图的代码，直接复制就可以看到效果

• fixed：元素框不再占有文档流位置，并且相对于视窗进行定位

• sticky：(这是css3新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。

浮动

    1. 浮动：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用float属性，它的属性值有两个，为right和left两个属性值。

• left：左浮动
• right：右浮动

    2.使用浮动常出现的问题:

           1) 对附近的元素布局造成改变，使得布局混乱

           2)因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高度就会坍塌。

   3.消除浮动

         使用浮动，常常就会用到消除浮动。消除浮动可以解决坍塌现象，使元素充满块

•  消除浮动常用的三种方法：

        1.在浮动的元素后面加一个空元素，设置属性为clear：both。

           缺点：成本太高，添加了一个元素，难维护

        2.通过设置css的样式： overflow：hidden

        3. after伪类：对子元素的after伪类进行设置。

   代码示例：通过浮动布局设计淘宝商品展示：

    

	
		
		
		
	
	
		

			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
				
				

			
			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
			
			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
			
			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
			
			

				

				
			 	
				
				   

					￥46.00
					包邮
				  
			
			
			
		

部分效果图：