CSS浮动和定位

一.浮动：浮动，就是使元素脱离标准流，移动到其父元素指定的位置的过程：float: left或者right

	浮动的子元素无法超出父元素范围，如果父元素有padding，那么子元素无法超出padding
	结论：一个父元素下，尽量让所有的子元素都浮动
	一个块级元素浮动以后，会产生类似inline-block的特性
	一个行内元素浮动以后，会产生类似inline-block的特性
	
    如何清除浮动？
	为什么要清除浮动？：在某些情况下，我们不能设定父元素的高度，但是所有的子元素都是浮动的（脱标），父元素的高度为0，父元素后面的元素会上提
	清除浮动的四种方法：
		1.额外标签法：在最后增加一个额外的div，用clear: both去掉浮动属性
		2.overflow: hidden ：强制父元素计算子元素高度	
		3.使用after伪元素   
		4.使用双伪元素  before，after:
		例如：.clearfix:before, .clearfix:after{ content: ""; display: table; }
		          .clearfix:after { clear: both;} 

二.定位：定位方式+偏移

	1.static：所有不设定的元素，定位方式都是static（默认）
		      不脱离标准流
		      偏移不起作用 ，(top，right，bottom，left)
		      作用：消除定位
		      
	2.relative：相对定位
		    不脱离标准流
	       	偏移起作用，上右下左  （起始点从元素本来应该所在的位置的左上位）
	        不破坏标准流，把元素移动到需要的位置
	        
		    relative+偏移 VS static+margin的区别？
			         relative只是移动了元素，不破坏标准流
			         static虽然也能移动，但是破坏了标准流
			         
		   relative作为absolute的基准
		   如果同时设定了letf，right，只有left有效；如果同时设定了通top，bottom，只有top有效
		   
	3.absolute（绝对定位）
		
		脱离标准流，跟着滚动条一起滚动
		偏移起作用，top，bottom，left，right（）
		设定了position: absolute，没有设定left，top的情况下
			如果没有设定left，top，所有对元素能产生作用的因素都会起作用：注意，与top：0；left：0；不等价
			不设定left，top的情况下，则被初始化为“应该在”的位置
			如果left被设定，top没有：则left按照设定，top在默认位置
			如果top被设定，left没有：则top按照设定，left在默认位置
		relative作为absolute的基准（父元素relative，子元素absolute）
		absolute元素如何居中？
			第一步，设定top，left为50%
			第二步，通过margin-left，margin-top设定负值
			
	fixed（固定定位）
		脱离标准流，不和滚动条一起滚动
		偏移起作用：top bottom，left，right
		不受父元素的影响，只受浏览器可视区的影响
		当一个元素被设定为固定定位时，会产生模式转换=》行内块元素，如果开始没有设定宽度，设定后宽度为最小
		面试题：能脱离标准流的：浮动，absolute，fixed
		面试题：所有标准流的动作，都会触发模式转换，对应元素变为行内块元素

叠放次序

	z-index：用于设定重叠元素的覆盖关系的
	                设定为一个数值，没有单位
		数值越大越靠上
		如果没有预先设定z-index，那么缺省是0，后定的元素在最上面
		设定z-index只对定位设定为relative，absolute，fixed三种有用，对标准流，浮动无效