float和margin混合作用的问题

Question

html的结构如下：

<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

情形1：

    div.box{
    height:260px;
    width:400px;    border:1px solid black;
}
div.left{
    float:left;
    height:30px;
    width:400px;
    border:1px solid red;
} 

div.right{
    float:left;
    height:30px;
    width:400px;
    border:4px solid green;
    margin-left:-300px;
    text-align:right;
}

效果

1。 两个框不在同一行，div.left已经占满第一。
2。 第二个框向左移动300px

情形2

    div.box{
    height:260px;
    width:400px;    border:1px solid black;
}
div.left{
    float:left;
    height:30px;
    width:400px;
    border:1px solid red;
} 

div.right{
    float:left;
    height:30px;
    width:400px;
    border:4px solid green;
    margin-left:-600px;
    text-align:right;
}

效果如图：

1。 两个框在同一行，为何发生重叠？

请问，如何解释情形2？绿框发生了什么行为？移动了多少？为何会重叠？

Answer 1

margin-left:-600px;让left和right加起来的宽度小于box的宽度，所以left和right都float在第一行，right在left的右边，由于right 的margin-left:-600px;所以往左移动600px;left长400px，right相对于left向左偏移200px。