CSS浮动与定位

浮动
如果希望块元素在页面中水平排列，使用float浮动元素，脱离文档流
可选值：
none：默认，元素在文档流中排列
left：元素脱离文档流，向页面左侧浮动
right：元素脱离文档流，向页面右侧浮动

元素浮动后，下边的元素会立即向上移动  （A浮动后，B会直接顶到上面）
元素浮动后不会超出父元素边框和内边距或其它浮动元素
浮动元素上边是一个没有浮动的块元素，浮动元素不会超过此块元素（A没有浮动，B浮动了，会在A下面）
浮动元素不会超过他上边的兄弟元素，最多一边齐。
元素浮动后会变成行内块元素，

子元素内容可能会溢出父元素内容区
overflow:visible 默认值，不会对溢出内容处理，在父元素外显示
hidden：会剪掉
scroll：添加滚动条（不论垂直和左右方向是否溢出都有）
auto：根据需求添加滚动条

浮动造成的父元素高度塌陷问题（本来父元素内容区高度是由子元素撑起来的，现在没了）
解决方式1：给父元素添加overflow:一个非visible属性
ie6用zoom:1;解决
解决方式2(ie6不支持)：.box1:after{content:"";disply:block;clear:both;}
解决方式3：在最后添加一个空的块元素，并添加clear：both；
clear：left/right/both;清除浮动元素对它最大的影响

推荐方法1
.clearfix:before,.clearfix:after{
content: "";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}

推荐方法2
.clearfix:after{
content: ".";   //在元素最后增加一个伪元素（因为父元素要包围住所有的元素）
display:block;  //清除浮动的元素需要是块级元素
height:0;       //让元素高度为0
vsibility:hidden; //让元素隐藏
clear:both
}
.clearfix{
*zoom:1;
}

元素的宽度为auto时，内边距不会影响可见框的大小，而是自动修改宽度，以适应内边距。
父元素的层级再高也盖不住子元素

定位
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位                      
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位：relative
1.相对定位是相对于元素在文档流中原来的位置左上角进行定位
2.相对定位的元素不会脱离文档流
3.相对定位会使元素提升一个层级
4.相对定位不会改变元素的性质，块还是块，内联还是内联
使用left，right，top，bottom来设置元素的相对偏移量 比如：left: 100px;top: 200px;

绝对定位：absolute 多用于一些图标的位置调整
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位），以左上角为定位，不考虑padding值
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位,滚动滚动条可以滚走。
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，

固定定位：fixed
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位
实现固定居中显示
top:50%;
margin-top:-npx;(自身高度的一半)

绝对定位和固定定位后内联元素变成块元素，块元素的宽度和高度默认都被内容撑开，如果没有内容要写宽和高

层级
如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
层级越高，越优先显示
对于没有开启定位的元素不能使用z-index