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

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

 

display是指顯示狀態，float是針對塊級元素的浮動。

使用inline-block：控制元素的垂直對齊跟橫向排列元素。

使用浮動：一、讓元素環繞某一個元素，對一個元素跟圍繞他的一些元素進行更多控制

               二、不想處理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; } 設置active的border，此時右邊兩個標題不會變化

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

結論：

   使用display：inline-block ，<li>變成內聯元素，位於一行，此時能夠控制寬高、外邊距等。此時爲<li>中的一個元素設置border，另外兩個<li>也須要和它在同一行，因此被撐開。

   使用float：left，只是向左浮動在一行，此時top位置始終對齊，三者沒有關聯性。

      

 

 

 

---

其餘問題

 

1、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; //使用浮動}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2、浮動、inline-block和圖像排列

 

左圖，把一系列元素設置了浮動，由於盒子二號寬度的關係，能夠發現盒子五號被擠進去了。 右圖使用inline-block則不會。

 

 

inline-block主要是爲了處理垂直對齊問題。

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

而inline-block因爲未脫離文檔流，因此元素不會被某個過長的列擠上來。若是你想再建立一列圖片時，不會受到上一列圖片inline:block的影響。

 

另外一種inline-block的適用：橫向導航欄。

 一、一般會設置a元素display：block而後進行浮動來製做；

 二、有時候會直接經過對列表元素設置display:inline來製做。

 

當你須要將元素（圖片、橫向排列連接）排列成一行或者多行時，inline-block會更好：

 一、更傾向於考慮使用inline-block代替float。

 二、直接使用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也是你處理一些問題的最佳方案。