一、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.绝对定位是以父元素为基准点进行定位(会脱离文档流)。相对定位是以其本身为基准点进行定位(离开原位置但是还占据着位置，未脱离原文档流)。