三个div并列为什么不行

关键代码：

.box1{

    width:960px;

    height:300px;

    background-color:#CFF;

}

.box2{

    width:740px;

    height:300px;

    background-color:#C9F;

    float:left;

}

.box3{

    width:210px;

    background-color:#FCF;

    height:300px;

float:right;

}

<div class='box1'></div>

<div class='box2'></div>

<div class='box3'></div>  

结果为：蓝色在第一行，紫色和粉色在第二行

但如果：

.box1{

    width:210px;

    background-color:#FCF;

    height:300px;

float:right;

}

.box2{

    width:740px;

    height:300px;

    background-color:#C9F;

    float:left;

}

.box3{

    width:960px;

    height:300px;

    background-color:#CFF;

}

就好了！也就是说第一个盒子一定要设置为float才行（视屏里也是第一个盒子设置为float），为什么？