（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代码形成了一个简单的瀑布流