css布局总结

1.默认情况下所有元素都在z-index:0这一层，这层为文档流。

2.relative 和 absolute都可以改变元素在文档中的位置，设置position：relative或position：absolute都可以让元素激活left、top、right、bottom和z-index属性（默认情况下，这些属性未激活，设置了也无效）。

3.设置relative或absolute都会让元素“浮”起来，也就是z-index值大于0，会改变正常情况下的文档流。不同的是relative会保留自己在z-index:0的占位，left,right,top,bottom的值是偏离原来文档流中的位置，其他仍然在z-index:0的元素的位置不会受到影响。absolute会完全脱离文档流，不再在z-index:0层保留占位符，其left,right,top,bottom是相对于自己最近的一个设置relative或absolute的祖先元素，如果没有，那就相对于body。

4.float 也能改变文档流，不同的是float不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0这层排列，用float:left或float:right来控制元素在同层里左右浮动。浮动原理：从文件流中分离出来，原先占据的位置就被后面的对象填上。     如果想多个快同一列，把浮动方向一致就可以了。 

5.absolute和float都会隐式地改变display类型，主要设置了其中一个，都会让元素以display:inline-block的方式显示，可以设置长宽，就是显式地设置display：inline或display：block,也仍然无效。相反，relative不会隐式改变display的类型。

6.清除浮动：clear:both; 消除浮动对子类的影响          消除浮动对父类的影响    

                1.增加一个空子类，类名为.class{clear:both};    

                2.overflow:hidden 子类不能有定位布局    

             

         3..clearFix:after{   

                           clear:both;   

                           display:block;   

                           visibility:hidden;    

                           height:0;  

                           line-height:0;   

                           centent:"";  

                         }      

                 .clearFix{zoom:1;}   //IE6

 

        溢出 overflov:visible(不剪切也不添加滚动条) hidden(不显示超过对象尺寸的内容)scroll(显示滚动条) auto(剪切或者滚动条)