CSS定位——position、float小结

在CSS使用position属性来指定元素的定位类型，该属性有四种不同类型的定位，分别为static（默认定位）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。

要理解以上四种定位，写看一下CSS的文档流（普通流）概念：

除非专门指定，否则所有框（也就是html元素）都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。若某元素的position属性的是默认static，那这个元素就在文档流中。

relative（相对定位）：

设置为相对定位的元素不脱离文档流，参考自身的位置通过top、bottom、left和right进行定位，让这个元素以自身原来的位置为基准进行移动，元素仍然保持其未定位前的形状，它原本所占的空间仍然保留（因为它没有脱离文档流）。因此，采用相对定位的元素有可能覆盖了其他元素，因为它其实占据了两个位置，一个是移动前的位置，一个是移动后的位置，若移动后的位置和别的元素冲突，就把别的元素覆盖了。

absolute（绝对定位）和fix（固定定位）：

与relative（相对定位）不同，设置为absolute（绝对定位）和fixed（相对定位）的元素脱离了文档流，元素原先在正常文档流中所占的空间会关闭，就像该元素不存在一样。

absolute（绝对定位）元素的位置相对于最近的已定位的祖先元素，若该元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

fixed（固定定位）是相对于浏览器窗口的，即将设置为fixed（固定位置）的元素固定在浏览器的某个位置上，即使拖动浏览器的滚动条，该元素的位置也不会改变，有点流氓。

在CSS中使用float属性用于改变块元素对象的默认显示方式。当块元素对象设置了float属性后，它将不再独占一行，而是可以浮动到左侧或右侧，知道浮动的框外缘碰到包含框或另一个浮动框的边框为止。注意：浮动框也不在文档流中，因此对文档流的中块框来说，浮动框就像不存在一样。这一点和absolute（绝对定位）属性类型，但float和absolute还有以下不同：

1.absolute元素的位置相对于离它最近的已定位的祖先元素，它可以以父元素框的4个顶点为基准进行定位。而float属性定位时则是根据left或right属性值，以父元素的左上或右上为基准进行定位。

2.采用absolute属性定位的元素不能被文本所包围，而采用float属性定位的元素可以被文本包围（float最初设计的用意就是这个，用以取代HTML中的align属性）。

3.float的影响可控，absolute的影响不可控。

设置float和absolute属性的元素都脱离了文档流，因此它们都会影响到其下方的元素。但是，absolute是布局属性，使用它时没有一种有效的方法使之与其下方的元素不重合在一起。

相反，若一个元素指定了float属性，当我们向其下方（或后面）的元素的应用了clear属性后（clear:left；clear:right；clear:both），其后的元素就不再受影响了。所以一般在网页布局时，更多的使用float属性。