浮動與display:inline-block
有的時候，我們需要使獨佔一行的兩個div能夠在一行和諧共處，解決方案大概有兩種：
1.為兩個div均新增display:line-block屬性
2.將兩個div都設成浮動的元素
這篇文章將深入探討二者的區別與聯絡，此外，還將會帶給大家一種垂直居中的新方式
我們將以下面的程式碼作為演示程式碼，這意味著每當我們討論一個新問題時就要把程式碼恢復成下面這個樣子：
CSS樣式：
<style>
.myContainer{
width: 500px;
margin: 20px auto;
background-color html內容：
<div 執行後的效果：
1.最基本的區別在於中間是否有空隙
我們首先試著將前兩個div都新增屬性display:inline-block，後兩個div都設定成左浮動。執行效果如下所示：
很顯然，由於屬性display:inline-block而在一行的塊級元素中間會出現間隙，而浮動則不會。
2.面對不同的高度，對齊方式不同
將程式碼恢復成演示程式碼，我們將類選擇器div2的height屬性設定成300px，檢視執行效果：
會發現在兩個div的高度不同時，兩種方式的對齊效果也不相同：
（1）display:inlne-block屬性修飾的元素沒有脫離文件流，當然會與在正常的文件流中的元素一樣採取的底端對齊方式。
（2）float屬性修飾的元素在一定程度上脫離了普通文件流的限制，只用考慮向某個方向浮動，所以會產生如圖的效果。
使用display:inlne-block的好處在於我們可以通過一個叫做vertical-align的屬性來控制兩個元素的對齊方式：
（1）我們為前兩個div分別新增一個屬性：vertical-align:middle
<div class="myContainer">
<div class="div1" style="display: inline-block;vertical-align: middle"></div>
<div class="div2" style="display: inline-block;vertical-align: middle"></div>
</div>檢視一下執行效果：（這裡我省去了後兩個浮動元素的截圖）
發現div1出現在了div2的居中位置。
這裡要注意，這兩個元素一定都要新增上vertical-align這個屬性。
當然，如果想讓它們頂端對齊，把middle改成top就可以了，截圖如下：
括展：垂直居中的新方式：
會思考的朋友會想到利用這種方式可以實現子div在父div內的垂直居中。原理很簡單，在父div內設定兩個子div：div1,div2,其中div1是我們要垂直居中的元素,div2是輔助元素。我們讓div2的寬度為0，高度為父div的高度，然後將div1和div2都加上display:inline-block和vertical-align:middle。之後，便可實現垂直居中。程式碼如下所示（這裡使用text-align:center保證水平居中）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中的新方法</title>
<style>
.myContainer{
width: 500px;
height: 300px;
margin: 10px auto;
background-color: gray;
text-align: center;
}
.div1{
width: 200px;
height: 100px;
background-color: red;
display: inline-block;
vertical-align: middle
}
.div2{
width: 0;
height: 100%;
background-color: aqua;
display: inline-block;
vertical-align: middle
}
</style>
</head>
<body>
<div class="myContainer">
<div class="div1"></div>
<div class="div2"></div>
</div>
</body>
</html>效果如圖所示：
4.瀏覽器縮放時的區別
有的時候我們需要在父div的一排內安置兩個子div,二者的寬度固定為某個畫素，中間空餘一定距離。這樣也存在有兩種方案：
（1）兩個子div一個向左浮動，一個向右浮動
<div class="myContainer">
<div class="div1" style="float: left"></div>
<div class="div2" style="float: right"></div>
</div>
（2）將它們設定為display:inline-block,然後通過margin來設定兩者間的距離：
<div class="myContainer">
<!--XXX為符合條件的具體值-->
<div class="div1" style="display: inline-block;margin-right: XXXpx"></div>
<div class="div2" style="display: inline-block;"></div>
</div>
這兩種方式在父div的寬度為具體畫素時幾乎沒有區別，但當父div的寬度為百分比時，則具有明顯的差別：
現在我們將myContainer中的width設定為50%，檢視效果，似乎也無差別，但當我們縮放瀏覽器時，就會發現：
不過父div的寬度一般都是固定的，最後一點大可不必擔心。
總結：
display:inlne-block與浮動各有各的優缺點與靈活之處,大家在選擇的時候可以結合我列舉的幾點綜合考慮。