CSS系列：CSS中盒子的浮动与定位

浏览数：18 / 时间：2015年06月09日

1. 盒子的浮动

　　在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。

　　CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。

float: left;

　　可以使用clear来清除浮动：

clear: left | right | both;

2. 盒子的定位

　　在CSS中有一个position属性，用来进行定位操作。position属性可以设置为4个属性值之一：

　　◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；

　　◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

　　◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

　　◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。

2.1 static

　　static为默认值，表示块保持在原本的位置上，不会有任何移动的效果。没有设置任何position属性相当于使用static方式。

2.2 relative

　　使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        .relative {
            position: relative;
            top: 20px;
            left: 20px;
            width: 500px;
        }
    </style>
</head>
<body>
    <div class="relative">Position相对偏移</div>
</body>
</html>