CSS定位：普通流定位属性和浮动

一、CSS定位：改变元素在页面上的位置

二、CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局

三、CSS定位属性：

/*
*position   把元素放在一个对应的位置中，位置包括：
        静态的static       默认属性，此时设置的偏移量将失效，元素也不会产生堆叠
        相对的relative     占用页面位置,与页面其它元素并排或并列显示，具有相对关系，使用偏移量效果叠加，可是元素堆叠，通过z-index设置堆叠显示顺序
        绝对的absolute     不占用页面位置，悬浮于页面，与屏幕形成绝对关系，与页面其它元素堆叠显示，使用偏移量效果叠加，可以通过z-index设置堆叠显示顺序；不随滚动条滚动，
        固定的fixed        不占用页面位置，悬浮于页面，与屏幕形成绝对关系，与页面其它元素堆叠显示，使用偏移量效果叠加，可以通过z-index设置堆叠显示顺序；随滚动条滚动
*top    元素向上的偏移量
*left    元素向左的偏移量
*right    元素向右的偏移量
*bottom    元素向下的偏移量
*overflow   设置元素溢出其区域发生的事情
*clip   设置元素显示的形状，主要用作图片
*vertical-align     设置元素垂直对齐方式,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
*z-index    设置元素的堆叠顺序
*/
#div1{
    width: 300px;
    height: 300px;
    background-color: red;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

#div2{
    width: 300px;
    height: 300px;
    background-color: blue;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}

#div3{
    width: 300px;
    height: 300px;
    background-color: green;
    position: absolute;
    top: 0px;
    left: 30px;
    z-index: 2;
}

四、CSS浮动：设置和取消元素浮动
float属性设置浮动，可能的值：
left 元素向左浮动
right 元素向右浮动
none 元素不浮动
inherit 从父级继承浮动属性

clear属性去掉浮动，可能的值：
    left    去掉元素向左浮动
    right   去掉元素向右浮动
    both    去掉左右两侧浮动
    inherit 从父级继承来的clear值

五、瀑布流

  <div id="div1">
        <ul>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
        </ul>
        <ul>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
        </ul>
        <ul>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
        </ul>
        <ul>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
        </ul>
        <ul>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
            <li><img src="bg.gif"></li>
        </ul>
    </div>

    样式：
    *{
        margin: 0px;
        padding: 0px;
    }

    #div{
        margin: 20px auto;
        width: auto;
        height: auto;
    }

    ul{
        float: left;
    }

    li{
        float: left;
        list-style: none;
    }