display:inline-block 和float:left 的區別
display是指顯示狀態，float是針對塊級元素的浮動。
使用inline-block：控制元素的垂直對齊跟橫向排列元素。
使用浮動：1、讓元素環繞某一個元素，對一個元素跟圍繞他的一些元素進行更多控制
2、不想處理inline-block帶來的空白問題
元素浮動后，它會變為 inline-block。其寬度不是100%
我遇到的問題：
 |
 |
html :
<div class="table"> <ul class="nav"> <li class="active">房產</li> <li>家居</li> <li>二手房</li> </ul> <div class="page"></div> //CSS中設置display:none; 隱藏 <div class="page-hide"></div> //CSS中設置display:block; 出現 </div>
css :
.tab-list{ //最外的框
width: 273px; height: 153px;
border: 1px solid black;
background-color: #ddd; }
.nav{ //上標題欄
height: 32px;
border-bottom: 2px solid red; }
.nav li{ //每個標題
display: inline-block;
height: 30px;line-height:30px;
width: 60px;
border:1px solid blue;}
.nav .active{
border-top: 2px solid yellow;
border-bottom: 2px solid #fff; }
設置active的border，此時右邊兩個標題會被一起撐下來
（border是加在內容寬度上面的。）
|
.tab-list{ //最外的框
width: 273px; height: 153px;
border: 1px solid black;
background-color: #ddd; }
.nav{
height: 32px;
border-bottom: 2px solid red; }
.nav li{
float：left;
height: 30px;line-height:30px;
width: 60px;
border:1px solid blue;}
.nav .active{
border-top: 2px solid yellow;
border-bottom: 2px solid #fff; }
|
結論：
使用display：inline-block ，<li>變成內聯元素，位於一行，此時可以控制寬高、外邊距等。此時為<li>中的一個元素設置border，另外兩個<li>也需要和它在同一行，所以被撐開。
使用float：left，只是向左浮動在一行，此時top位置始終對齊，三者沒有關聯性。
其他問題
一、inline-block帶來的間距留白問題
#list li{
border-right:1px solid #fff;
border-bottom:1px solid #fff;
list-style:none;
text-align:center;
display: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和圖像排列
 |
|
左圖，把一系列元素設置了浮動，因為盒子二號寬度的關系，可以發現盒子五號被擠進去了。 右圖使用inline-block則不會。
inline-block主要是為了處理垂直對齊問題。
若父元素中的圖片等高，設置浮動就會工作正常。但一旦有一列圖片比較高時，圖片的排列就會出現問題。這是因為浮動后，圖片脫離了文檔流。
而inline-block由於未脫離文檔流，所以元素不會被某個過長的列擠上來。如果你想再創建一列圖片時，不會受到上一列圖片inline:block的影響。
另一種inline-block的適用：橫向導航欄。
1、通常會設置a元素display：block然后進行浮動來制作；
2、有時候會直接通過對列表元素設置display:inline來制作。
當你需要將元素（圖片、橫向排列鏈接）排列成一行或者多行時，inline-block會更好：
1、更傾向於考慮使用inline-block代替float。
2、直接使用table也是一種方法，table是專門用來處理橫向與縱向排列的元素的。當需要創建一個很復雜的包含行列的布局，
table是最佳選擇。
 |
 |
|
#columnContent .item_ul>li
{
float:left;
width:203px;
margin:3px 5px;
vertical-align:top;
text-align:left;
}
效果：菜單居中和自適應
問題：整體樣式沒問題，但是展開li標簽內容時，其他li標簽環繞，
又因為存在自適應，當頁面縮小時，每行的li標簽個數會減少，並且居中
|
#columnContent .item_ul>li
{ display:inline-block; width:203px; margin:3px 5px; vertical-align:top; text-align:left;
*display:inline;
zoom:1; }
只需替換一個浮動樣式就都解決了。
|
總結：
inline-block元素帶有一些行內元素的特征（橫向排列），同時內部也擁有塊級元素的屬性。這個跟浮動很類似，只不過有些區別，這些區別決定了你該使用哪種方案。 如果你很糾結垂直對齊問題或者橫向排列元素，不妨使用inline-block。如果你需要對一個元素跟圍繞他的一些元素進行更多控制，你需要浮動。 當然，table也是你處理一些問題的最佳方案。