（4）CSS定位和浮动

一、CSS的定位

改变元素在页面上的位置

1.CSS定位机制

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

2.CSS定位的属性

属性	描述
position	把元素放在一个静态的、相对的、绝对的、或固定的位置中
top	元素向上的偏移量
left	元素向左的偏移量
right	元素向右的偏移量
bottom	元素向下的偏移量
overflow	设置元素溢出其区域发生的事情
clip	设置元素显示的形状
vertical-align	设置元素垂直对齐方式
z-index	设置元素的堆叠顺序

position

position的 四个属性
static：静态布局，left和right不起作用
relative：相对布局，元素之间位置可用left和right调整
absolute：绝对布局，元素在页面中不再占有位置，别的元素可重叠之上
fixed：元素在窗口中的位置固定，别的元素可以下滑走，但是这元素还在原来位置

二、CSS的浮动

1.float属性

相当于在页面中抠出来，然后浮在页面，当容器宽度无法承载一个元素时，该元素自动下一行
left向左浮动
right向右浮动
none元素不浮动
inherit继承父级浮动属性

2.clear属性

去掉浮动属性
left去掉向左浮动
right去掉向右浮动
both去掉两侧浮动
inherit继承父级来的clear值

<div id="div1">
    <ul>
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
    </ul>
    <ul>
        <li><img src="4.jpg"></li>
        <li><img src="5.jpg"></li>
        <li><img src="6.jpg"></li>
    </ul>
    <ul>
        <li><img src="7.jpg"></li>
        <li><img src="8.jpg"></li>
        <li><img src="9.jpg"></li>
    </ul>
</div>

*{//*是通配符
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;//列表没有样式
}
#div1{
    width: 950px;
    height: auto;
    margin: 20px auto;//上下外边距是20px，左右是自适应
}
ul{
    width: 250px;
    float:left;//向左浮动
}

以上CSS代码形成了一个简单的瀑布流