细谈CSS布局方式

一、CSS布局方式分类

[1].默认文档流方式：以默认的html元素的结构顺序显示 

　　[2].浮动布局方式：通过设置html的float属性显示,值：none不浮动、left对象向左浮动，而后面的内容流向对象的右侧、right对象向右浮动，而后面的对象流向对象的左侧(取消独占一行的行为，允许别人与其一行，其实是这个块从文档流中分离出来，他之后的对象视它不存在) 

　　[3].定位布局方式：通过设置html的position属性显示

　　　　position设置对象的定位方式，

　　　　值：static(静态定位，页面中的每一个对象的默认值) 

　　　　　　absolute(绝对定位,将对象从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位，如果不存在这样的父级对象，则依据body对象) 

　　　　　　relative(相对定位，对象不从文档流中分离出来，通过设置left、right、top、bottom四个方向相对于自身位置进行相对定位)

　　　　注意：当想使用相对于父元素的绝对定位时，必须要有两个条件：

1.必须给父元素加定位属性，一般建议使用：position：relative。(不指定时默认为body)

　　　　　　　　2.给子元素，加绝对定位position：absolute，同时要加方向属性（left/right/top/bottom）.

　　　　　　　　3.绝对定位是以父元素为基准点进行定位(会脱离文档流)。相对定位是以其本身为基准点进行定位(离开原位置但是还占据着位置，未脱离原文档流)。