關於inline-block和float的對比

關於inline-block

當把元素的display屬性設置爲inline-block時能夠是元素變成行級元素（先後不換行）可是還能夠設置一些塊級元素的屬性，從而實現元素的並列。
固然將元素設爲浮動也能夠實現元素的並列

inline-block和float的比較

文檔流：inline-block不會脫離文檔流，仍然在文檔裏佔據正常的位置，可是float的元素會脫離文檔流
水平位置:不能設置父元素的text-align是浮動元素居中，事實上，在在父元素上設置此類效果在浮動元素上均無效（脫離文檔流），可是inline-block的元素能夠被設置爲水平居中
垂直對齊:inline元素沿着基線對齊，能夠經過vertical屬性設置基線，浮動元素眼頂部對齊，注意：當inline元素內部有元素時，其基線會發生變化，對齊會錯亂，依然能夠經過設置vertical屬性恢復
空白:內聯元素會將換行當作是空白節點，所以元素之間會出現間隔解決方式
對其餘元素的影響:inline-block對其餘元素基本無特殊影響，float元素會出現環繞（float元素雖然脫離了文檔流，可是會佔據父元素和相鄰元素的內容空間）