display:inline-block 和 float 水平排列區別？

1. 文檔流（Document flow）:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。所以設置inline-block不須要清除浮動。固然，周圍元素不會環繞這個元素，你也不可能經過清除inline-block就讓一個元素跑到下面去。
2. 水平位置（Horizontal position）：很明顯你不能經過給父元素設置text- align:center讓浮動元素居中。事實上定位類屬性設置到父元素上，均不會影響父元素內浮動的元素。可是父元素內元素若是設置了 display：inline-block，則對父元素設置一些定位屬性會影響到子元素。（這仍是由於浮動元素脫離文檔流的關係）。
3. 垂直對齊（Vertical alignment）：inline-block元素沿着默認的基線對齊。浮動元素緊貼頂部。你能夠經過vertical屬性設置這個默認基線，但對浮動元素這種方法就不行了。這也是我傾向於inline-block的主要緣由。
4. 空白（Whitespace）：inline-block包含html空白節點。若是你的html中一系列元素每一個元素之間都換行了，當你對這些元素設置inline-block時，這些元素之間就會出現空白。而浮動元素會忽略空白節點，互相緊貼
5. IE6和IE7：Ie67對此屬性部分支持。若是你要兼容這些瀏覽器，必須解決這個問題。這不是個大問題，但值得留意一下。

　　

　　關於第4條空白節點的解決方案

1. 刪除html中的空白：不要讓元素之間換行，這可能比較蛋疼，但也是一種方法，特別是你元素很少的時候。
2. 使用負邊距：你能夠用負邊距來補齊空白。但你須要調整font-size，由於空白的寬度與這個屬性有關係。我認爲是0.25em，但我不肯定。若是有人知道能夠留言告訴我。
3. 給父元素設置font-size:0：無論空白多大，因爲空白跟font-size的關係，設置這個屬性便可把空白的寬度設置爲0.在實際使用的時候，你還須要給子元素從新設置font-size。