float與absolute脫離文檔流的區別

使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍。例如：

.firstdiv{
    background-color:rgba(125,125,235,0.4);
    height:200px;
    width: 200px;
    float: left;
  }
  .seconddiv{
    background-color: #faf;
    height:300px;
    width: 300px;
    border:1px solid red;
  }
  <div class="firstdiv">
     這是第一個DIV
  </div>
  <div class="seconddiv">
     這是第二個DIV
  </div>

根據chrome調試和紅色邊框，能夠看到第二個div的背景和邊框是佔據了第一個DIV的空間的，可是第二個div的文本仍然爲第一個DIV留出了位置。

對於使用absolute position脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。
例如：將上例中float：left改成position: absolute。能夠看到，第二個div的文字亦被第一個div的文字給覆蓋了