css的display:inline-block和float:left的區別

要解決的問題：今天玩了點前端，想用js(代碼就不浪費內存了)製做一個一下的表格：

解決的方法：使用的css樣式以下：

 #list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    display:inline-block;//由於學到inline-block了就實踐下
}

 產生的效果：使用上面的方法，結果怎麼設置也設置不成上面那個效果：

遇到的問題：第二行開始border老是不能連續；

解決方法：果斷擺渡了一下，原來是使用display:inline-block時vertical-algin候默認爲baseline問題所致：

方法一：

 #list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    display:inline-block;
    vertical-align:middle;//默認是baseline
}

 方法二：

#list li{ 
    border-right:1px solid #fff; 
    border-bottom:1px solid #fff;
    list-style:none; 
    text-align:center; 
    float:left;//使用浮動
}

 問題深究：inline-block和float的區別，何時使用

何時使用，取決於你的設計稿跟解決方法。若是你須要文字環繞容器，那浮動是不二選擇。若是你須要居中對齊元素，inline-block是個好選擇。

最終，這能夠歸結爲float跟inline-block的兩種屬性做用後的區別，你須要對其做出選擇。

1. 使用inline-block：當你須要控制元素的垂直對齊跟水平排列時，使用inline-block。
2. 使用浮動：當你須要讓元素環繞某一個元素時，或者須要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。

上圖，把一系列元素設置了浮動，由於盒子二號寬度的關係，能夠發現盒子五號被擠進去了（這些元素都脫離了文檔流），這是圖片排列中很常見的問題。

浮動、inline-block和圖像排列

我使用inline-block主要是爲了處理垂直對齊問題。我想這也是不少人使用這個屬性的緣由。我製做的不少站點都不可避免的帶有一些圖片列表。

若父元素中的圖片等高，設置浮動就會工做正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是由於浮動後，圖片脫離了文檔流。

而inline-block因爲未脫離文檔流，不會出現這個問題。若是你想再建立一列圖片時，不會受到上一列圖片inline:block的影響。而你在使用時須要時刻注意清除浮動，當內容不斷變化時這很容易產生bug。

這裏有個更明顯的例子來體現inline-block跟float的區別：

我製做了一個demo來展現一下兩個寫法效果的區別

上面的塊級元素被設置了inline-block。因爲他們沒有脫離文檔流，因此元素不會被某個過長的列擠上來。

inline-block導航

另外一種inline-block的適用場景：橫向導航欄。一般，咱們通常會設置a元素display：block而後進行浮動來製做。有時候我會直接經過對列表元素設置display:inline來製做。若是在製做中，你須要設置不一樣的display屬性來處理浮動，那麼inline-block不失爲一種更好的解決方案。

當你須要將元素排列成一行或者多行時，更傾向於考慮使用inline-block代替float。固然，直接使用table也是一種方法，他畢竟是專門用來處理橫向與縱向排列的元素的。

若是你須要建立一個很複雜的包含行列的佈局，table是你的最佳選擇，不過你一樣也能夠考慮inline-block

總結

咱們常用浮動，但浮動並非惟一的解決方案。有時候inline-block會更好，特別是你想排列一些圖片，或者橫向排列連接時。

Inline-block元素帶有一些行內元素的特徵（橫向排列），同時內部也擁有塊級元素的屬性。這個跟浮動很相似，只不過有些區別。

這些區別決定了你該使用哪一種方案。若是你很糾結垂直對齊問題或者橫向排列元素，不妨使用inline-block。若是你須要對一個元素跟圍繞他的一些元素進行更多控制，你須要浮動。

固然，table也是你處理一些問題的最佳方案。

一樣我想說的，這不是什麼新東西，但我會經過這篇文檔還有demo來介紹一些應該使用但有些人還沒有使用inline-block的場景。

項目demo：

    #columnContent .item_ul>li
    { 
        flaot:left;
        width:203px;
        margin:3px 5px;
        vertical-align:top;
        text-align:left;
            }

效果

菜單居中和自適應須要根據頁面的寬度計算

css:   

    #columnContent .item_ul>li
    {
        display:inline-block;
        width:203px;
        margin:3px 5px;
        vertical-align:top;
        text-align:left;
       
        *display:inline;   
        zoom:1;
     }
菜單用ul-li標籤水平排列流狀顯示，float:left也可實現一樣的顯示效果，可是float時撐開一個li標籤，其餘li標籤會環繞，特別注意 和學習float和inline-block的區別，特殊狀況下利用inline-block的特殊性能夠實現別樣的效果

上面是在實際項目中應用，要求實現後面一張圖的效果，起初li標籤用的是float:left，總體樣式沒問題，可是展開li標籤內容時，其餘li標籤環 繞，這裏又存在自適應，當頁面縮小時，每行的li標籤個數會減小，而且居中，曾經作過自適應和居中的計算以及考慮用table佈局，如今回過頭太悲區 了，inline-block只需替換一個浮動樣式就都解決了，細節和差別理解透徹了，才能作出更好的效果和節省更多沒必要要的時間。

 內容轉載自：http://blog.sina.com.cn/s/blog_5f39af320101qckt.html，純屬學習總結，若有不妥，及時聯繫刪除，謝謝。