定位与float共同作用于盒子对布局的影响

float与绝对定位最终都达到的共同效果就是使应用了这两个属性中的任何一种属性的盒子，偏离了原来所在的标准流。

我们先分开来讲，首先我们来看看对盒子应用了绝对定位样式的三种情况：没有指定top、right、bottom、left四个中任意一个的值，指定了其中一个的值和指定了其中两个的值。给出一个html代码片段：

<!--样式部分-->

<style type="text/css">
div{
width:500px;
border:1px solid #C69;
margin:10px auto;
padding-top:10px;
padding-left:10px;}
#div1,#div2{
width:100px;
margin-left:0px;
}

#div1{
width:100px;
border:1px solid #000;
}
#div2{
width:200px;
border:1px solid #09F;
}
</style>
<!--body部分-->
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>

在此段代码的样式部分，为id值为div1的盒子添加样式position：absolute，会发现id值为div1的盒子仍然处在原来的位置，没有动，但是却被id值为div2的盒子所覆盖。由此我们可以看出，应停用了绝对定位样式的盒子脱离了标准流；而应用了绝对定位样式，且没有指定top、right、bottom、left四个中任意一个的值的盒子，默认的位置仍然是原来的位置。

继续为id值为div1的盒子添加样式left：20px,会发现盒子在竖直方向上的高度并没有变化，而水平方向则距离浏览器的左边框20px。由此我们可以看出，应用了绝对定位样式，且指定了盒子在水平或者竖直任意一个方向上的偏移量的值，水平或竖直方向上分别以浏览器的水平或竖直边框为基准进行偏移，未被指定值的方向不变化。

再为id为div1的盒子添加样式top：20px，会发现盒子在竖直方向上向下便宜了20px。由此我们可以看出，应用了绝对定位样式，且指定了水平和竖直方向偏移量的值，水平和竖直方向上分别以浏览器的水平和竖直边框为基准进行偏移。以上三种情况在IE和FIrefox中的效果相同。

再为id值为div1的盒子添加样式float：left/right。盒子没有任何变化，因此，对绝对定位的盒子进行浮动是没有用的，浮动是应用于处于标准流中的盒子的。

而相对定位与浮动一起应用于盒子时，盒子在水平和竖直方向上的偏移则是相对于浮动后的盒子自身所在的位置。