css 浮动 相对定位 绝对定位区别

　　今天下班在地铁上看了一个样式教学视频，因为最近在学习前端。以前刚毕业的时候，感觉后台才是王道，但最近发现，前端也很重要，比如：自己接一些私单做的时候，自己要根据需求做好界面，才能更加符合客户需求，不然还得找人去做；不同的是，后台的就可以放心找人做，只要测试得没问题，效率还过得去就可以了，所以最近打算学好点前端，自己接一些单子来做。废话不多说，入正题：

　　html是按照文件流（普通流）的方式加载的，但是全部是普通流的话，很多好看的样式是实现不了的，所以出现了浮动，相对定位，绝对定位的概念。

　　一、首先，按照普通流和非普通流来分类：

　　　　①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。

　　　　②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。其中static是属于普通流；relative也是属于特殊的普通流，详细下面有介绍；absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，但是会脱离普通流的位置。

　　二、分别介绍static,relative,absolute,fixed和float（通过top,left,right,bottom来设置相对定位）

　　　　①static：就是默认的普通流，不手动设置position样式的话，默认就是static；

　　　　②relative：叫相对定位，指的是相对他自己原来的位置的相对位置，并且原来的位置还是占着的（所以说属于特殊的普通流），其他的元素不会填上去，但是设置好相对位置之后，他新的位置是不会挤压其他元素的，就像把该元素从原来的位置上抠出来，放在单独一层来布局。

　　　　③absolute:叫绝对定位，指的是①相对其父元素位置的绝对定位，但是他属于非普通流，②原来的位置是不会占着的，是单独的一层，脱离了普通流。除了以上两点，其他的和relative差不多。

　　　　④fixed：叫固定定位，指的是元素相对于浏览器窗口的定位（比如一些网站两边的广告），拉动滚动条，他也不会跟着动，也是属于非普通流，其他的跟relative差不多。

　　　　⑤float：叫浮动，是css单独的样式，有top，right，bottom，left四种常用值，以上四个是属于position的一种；float也是属于普通流，单会改变普通流。他只能和普通流在同一层，但是可以改变元素的位置，同样是占着位置的（和relative有点像），不会单独一层（而relative，absolute，fixed会单独一层，可以设置z-index属性来改变其前后位置）。使用float之后，元素则会脱离普通流，该元素则在普通流上不再占用位置，普通流的元素则会填补上去，这样如果不去设置的话则会出现重叠覆盖的情况；如果想使用了float的元素也占着普通流上的位置，该如何办呢？这时候，可以把应用了float样式的元素紧接着的元素应用clear样式，clear样式包括：both，right，left三个值。both表示right和left的float都清除掉，另外两个同理。这样子则可以清除在此之前的非普通流，让他们也占着普通流上的位置，但是这只是占着位置，其实该元素是不存在于该位置的，该位置不存在任何元素（详细自己google理解），但是这样子的话，紧接着的那个元素想设置margin等，是会出现问题的，因为应用了float样式的元素霸占的那个位置其实是什么东西也没有的，不存在边界，所以应用margin则不会以那个元素（应用了float的那个）为边界的，会跳过那个边界来计算，当然你也可以把margin设大点（也就是加上float元素的长度或者宽度）也可以达到效果。其实，可以在float后面的元素之前，单独加个 <div > 清楚元素来专门用于清除浮动即可，接下来的元素应用margin则可以正常起效（补充：其实一般来说，可以在样式表里面单独设置 .clear{clear：both;} 这样的样式来专门用于清除浮动，避免重复，代码会规优雅规范很多）。

　　三、z-index作用

　　　　可以用来处理非普通流元素的前后位置，z-index越大，元素就在越前面(同时存在普通流和非普通流的时候才有意义）。

　　四、块元素和行内元素一些差别

　　　　①块元素才有width,height属性，而行内元素没有；

　　　　②每个块元素默认自动占一行，而行内默认会挤满一行才会继续下一行；

　　　　③行内元素在css加上“display：block”则可以使该元素变成块元素；

　　　　……