<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向左浮動(dòng)，此時(shí)div2會(huì)移動(dòng)到原先div1的位置，但是被div1遮蓋，而內(nèi)容不會(huì)和div1重疊，所以會(huì)顯示在下面。

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