CSS定位/浮动——position/float

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

1、简述

例如div、h1、p元素为块元素；strong、span元素为行内元素
通过display属性可改变这些元素的类型
CSS定位的机制有：普通流、浮动、绝对定位

2、static定位：

HTML元素的默认值，即没有定位，元素出现在正常流中元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中

静态定位的元素不会受到top、right、bottom、left影响

3、fixed定位：

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动

例如：固定一个p段落在距离浏览器上方30px，距离右方5px：

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

4、relative（相对定位）:

相对定位元素的定位是相对其正常位置：

注意：==在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间==。因此，移动元素会导致它覆盖其它框

例如：h2标签相对于正常位置向右移动了20px

h2.pos_left
{
    position:relative;
    left:20px;
}

5、absolute（绝对定位）：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块或者画布:

注意：absolute定位使元素的位置与文档流无关，因此不占据空间，而且==可以覆盖页面上的其它元素==

例如：h2标签被放在距离左边的页面100 px和距离页面的顶部150 px的元素:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

6、重叠的元素：

当相对定位或绝对定位出现重叠的元素时，z-index指定了一个元素堆叠的顺序

例如：设定img在其他与它重叠元素的下边：

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面==具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面==。具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

7、CSS定位的其他属性：

（1）overflow属性：

值为scroll时，当内容溢出元素框时会出现滚动条
值为hidden时，当内容溢出元素框时将会隐藏溢出的内容

（2）clip属性：

clip 属性剪裁绝对定位元素
clip属性的唯一合法值为：clip:rect(top,right,bottom,left)

8、浮动属性——float

元素的水平浮动，意味元素只能左右移动
一个元素会尽量水平浮动，直到它碰到包含框或另一个浮动框的边框为止
浮动元素之后的元素将围绕它
如果图像是右浮动，下面的文本流将环绕在它左边

（1）彼此相邻的浮动元素：

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻

例如对图片廊使用float属性：

.thumbnail 
{
    float:left;
    width:110px;
    height:90px;
    margin:5px;
}

（2）清除浮动——clear属性：

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素

CSS定位/浮动——position/float