CSS元素浮動位置

 <div class="wrapper">
    <div class="div1"></div>
    <div class="div2">test</div>
  </div>

.wrapper {
  height: 500px;
}
.div1 {
  float: left;
  width: 200px;
  height: 200px;
  background: red;
}
.div2 {
  width: 200px;
  height: 200px;
  background: dimgray;
  
}

代碼如上所示，div1向左浮動，此時div2會移動到原先div1的位置，但是被div1遮蓋，而內(nèi)容不會和div1重疊，所以會顯示在下面。

此時將div2的margin-top設置為100px, div2會向下移動100px，但是同時浮動的div1也會向下移動100px。這是為什么？浮動元素頂端不是應該盡可能的高嗎？應該在包含框的上邊緣位置吧？