css-position 四种定位与元素浮动
在介绍定位之前，我们有必要了解一下文档流
1、文档流与脱离文档流
文档流是相对于盒子模型来讲解的，正常的文档流就是标签所处的一个空间，脱离文档流就是标签所处的另一个空间（正常空间之上的空间），一般来说，所有的页面操作都是基于这两个空间上完成的。并且脱离文档流空间的元素位置是不固定的，也没有块级和行级属性。 举个例子：当元素浮动时，会使其跳出文档流，也就是说后面的元素会无视先前它所占有的位置，直接在它的位置进行布局。
2、元素的定位
1）Static（默认值）：
这个是元素的默认定位方式，会占据正常的空间，处于文档流之中，并且忽略“left”等属性是产生的任何效果。
2）Relative（相对定位）
相对定位的方式。相对于自身在文档流中所处的位置来进行定位，参照物为自身，仍处于文档流中，原先占有的空间仍保留（一般用作改变层级和作为绝对定位的参照物）
3）Absolute（绝对定位）
绝对定位是脱离文档流的，默认宽度为内容的宽度，在页面中是不占据空间的，后面的元素会在其原来的位置上进行布局，参照物为第一个定义的属性不是static的祖先或者父元素（如果没有父元素的话，那就应该以body为父元素），定位之后都会产生块级框。元素的位置通过“top”,”bottom”,”right”,”left”属性进行定位。
4）Fixed（固定布局）
固定布局是脱离文档流的，默认宽度为内容的宽度，参照物为浏览器窗口，其特性和absolute是相同的，当然，如果给头部定义了一个固定布局，头部则不会随着滚动条移动了（如百度的搜索框）。元素的位置通过“top”,”bottom”,”right”,”left”属性进行定位。
下面我们用实例来说明这些问题：
相对定位
以上两个div框生动的展示了在运用relative进行布局时，在使用top，left进行布局时，bottom与right的属性设置是不起作用的，它们的值是默认的，也就是自适应的，如上左图所显示； 当未设置top和left时，元素的位置会按照bottom和right进行定位，如上右图所显示。
代码如下：
<body>
<div style="width:100px; height: 100px; background-color: lightblue;"></div>
<div style="width: 100px; height: 100px; background-color: pink; position: relative; top: 20px; left: 20px; right: 20px; bottom: 20px;"></div>
</body>绝对定位：
绝对定位与相对定位的偏移量的属性设置都是一样的，在top和left属性存在时，bottom和right属性的设置是不起作用的，它们脱离文档流且若不能确定元素位置的大小时，以偏移量来确定元素的具体位置。
代码如下：
<div style="width:200px; height: 200px; background-color: lightblue;position: relative;">
<div style="width: 100px; height: 100px; background-color: pink; position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px;"></div>
</div>3、浮动：
1）浮动可以使元素向左或向右偏移，会给每个元素产生一个块级元素框，直到这个块级框遇到边界框或者另一个元素的边框。且浮动使得元素脱离文档流，后面的元素会直接在其原来的位置上进行定位。
2）当元素在浮动的方向上没有足够的宽度来容纳它时，元素就会下坠到下一行；当然，如果浮动元素的高度是不相同的话，那么下坠的元素可能会将空缺的位置补齐。
下面以一组图片来说明这个问题：
以上就是浮动的一些东西，至于清除浮动，我们找时间再来一起讨论。
下一篇： css-02