定位

定位共有四种情况position:static/relative/absolute/fixed

（一）普通流

(1)相对定位 relative  

相对于元素原来的位置进行移动。元素原来的空间仍然存在。

(2)static 普通流 块元素生成块，行元素形成父元素内的行框

（二）绝对定位

(1)绝对定位 absolute

相对于他的包含快移动（父元素），在文档中空间关闭，元素以块级框存在。可以配合z-index来实现覆盖层顺序。

(2)fixed  与absolute相似，但是是相对于视图本身。所以可以打造一种屏滚但是导航位置不变不动的效果。

（三）浮动

(1)float 浮动

应用于标签，使标签元素浮动，也是使各种框浮动。浮动框不在文档的普通流中，所以文档中普通流的框表现的像没有浮动框一样。这样就会产生覆盖重叠。元素float以后都会转变成块元素相当于inline-block。

(2)为什么要清除浮动

 当父盒子没有设置高度的时候，子元素浮动，那么容易产生父盒子没有实际高度，父盒子的边框和背景就会出现问题，此时就要清除浮动。

子元素浮动，不存在与普通流之中，那么他的兄弟元素会忽略他，出现重叠。布局出现问题，要去除浮动。

(3)清除浮动的方法 

一、父元素设置overflow:hidden 这个方法会使子元素超出父元素的部分隐藏无论是height还是width。    缺点是：容易是信息隐藏不完整。

当然 overflow：auto也可以，但是会有滚动条，在火狐上早有问题。

二、clear：both | left | right |none | inherit 额外标签法。在浮动元素最后添加一个空块级标签，然后样式中clear：both；或者是<br clear="both| left |                  right |                  none">       缺点是：增加了无意义标签，不利于语义化。

        三、 dispay：table 和父元素浮动不推荐

四、：after 伪元素 不增加语义混乱 原理是：在父元素上：after内定义一个块级元素，然后设置content：” “，clear：”both“即可。IE6/7不识别：after                  因此要单独处理zoom是ie私有属性。

eg: .clearFix:after{content:"";display:block:clear:both}

                     .clearFix{ zoom：1}