CSS浮动、绝对、相对定位

浮动

float:属性{

　　　　float:none;    默认值，对象，不漂浮

　　　　float:left;　　文本流向对象的右边

　　　　float:right;

};

清除浮动

clear:属性{

　　　　clear:none;　　允许对象两遍都可以浮动

　　　　clear:left;　　　不允许左边有浮动

　　　　clear:right;　　不允许右边有浮动

　　　　clear:both;　　两遍都不允许有浮动

};

 

定位

position:属性{

　　　　position:static;　　   静态定位

　　　　position:fixed;　　    固定定位

　　　　position:absolute;　  绝对定位 

　　　　position:relative;　　相对定位

};

绝对定位 （absulote）:将对象从文档流中拖出使用left,rigt,top,bottom属性,相对于最接近得一个具有定位设置的父对象，进行绝对定位，如果不存在这样的父对象，则依据body对象。绝对定位对象可层叠，层叠顺序可通过z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值（目前负值FF不支持）。

相对定位 ( relative ) :对象不可层叠，但是，left,right,top,bottom,这些属性在正常文档流中偏移位置。同样可以用z-index分层设计。

 

定位的形象解释

(1) 绝对定位(absolute)

如果使用决定定位，绝对定位对象会让出自己原先占用位置，它是贡献的。如果之前没有对父元素定位，那么子元素位置不会受父元素位置影响，父元素怎么移动，子元素还是在原来的位置，至于子元素要在哪个位置，则以html(body左上角)上角为准,用left，right，top，bottom值来定位，但是如果父元素也给出了定位设置(通常是相对定位)，此时子元素的位置就没有那么自由了，尽管此时子元素改变位置了也不会影响父元素(文本流)，但它还是要遵循父元素的话，父元素会告诉它"你可以活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走",课件绝对定位的对象参考目标是它的父极。专业惩称之为包含块。

（2）相对定位(relative)

相对定位一个最大的特点是:自己通过定位离开了还占用着原来的位置，不会让给他周围的文本流之类的对象，相对定位也比较独立,做什么事他自己说了算，要定位的时候，它是以自己本身所在位置偏移的，文本流相对定位对象还存在影响，因为对象并没有真正脱离文本流，就像两个人在同一层楼水平移动的过程中会有朋友的机会。

 

总结两种定位的特征

绝对定位就像是把不同对象安排到了移动高楼的不同楼层，它们互不影响，但是它们怎么移动与你楼的地基和面积(父极)有关，相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。

再用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，他就会神奇般的跑出墙外去了，当然现实中可没有这种惊险而又神奇的事发生。

对于普通的页面布局，不到万不得已不要使用absolute进行定位。

想重构高质量的页面，少用绝对定位布局！