float 和 inline-block的心得

float

優點：

橫向排列時比較方便，不存在瀏覽器相容問題。

缺點：

1）多行橫向排行時，換行後經常無法頂行顯示。

2）浮動後會跳出目前流，造成父元素高度塌陷，解決辦法比較成熟統一 ，不存在瀏覽器相容問題。

 

inline-block

缺點：最大的問題就是在不同的瀏覽器下，解決空白間隙的方法會不同，難以統一，相容性不好。常見解決方法有，父元素設定font-size:0;大部分瀏覽器可以這樣，個別不行的在不影響佈局的前提下還可以加個display:table。個人不喜歡用letter-space和word-space總是覺得不同瀏覽會有不同問題。

優點：換行時頂行顯示，可以用text-align,white-space等屬性操作，text-align:justify兩邊對齊，效果特棒，white-space:nowrap可以不換行，有時有奇效。

 

 

先寫這一點，有時間再補充吧