float left轉inline-block地雷

今天下班前de不出來的一個bug，
試問以下兩個code出來的結果有何不同:

old.html

<div style="width: 1000px;height: 500px;">
  <div style="float: left;width:70%;height:100%;background: #145"></div>
  <div style="float: left;width:30%;height:100%;background: #222"></div>
</div>

bug.html

<div style="width: 1000px;height: 500px;">
  <div style="display: inline-block; width:70%;height:100%;background: #145"></div>
  <div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>

你會發現bug.html怎麼樣都沒辦法把底下兩個div正確地塞進上層的div裡，

 bug.html底下兩個div中間會多出一條莫名其妙的空白線，但你用chrome/firefox inspector怎麼看兩個div的padding/border/margin 都找不到那條空白線到底是哪裡來的。

==========無用防雷線=============

解答:

 inline-block對外層來說兩個div排列是inline所以那個白線來自html排版中的空白text node，你需要把兩個div間的空白完全拿掉才能成功排列：

<div style="width: 1000px;height: 500px;">
  <div style="display: inline-block; width:70%;height:100%;background: #145"></div><div style="display: inline-block; width:30%;height:100%;background: #222"></div>
</div>