以下面這組 div 爲例，wrap 的高度由內容撐開
<div id="wrap">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
平時是這樣的，上下排列~
float 浮動
#div1{
float: left;
}
#div2 {
float: right;
}
#div3 {
float: right;
}
然後這樣了
成功橫向排列了，但是有幾個問題~
float 的特點：
- 多個 div 右浮動時，順序會顛倒，請注意看 div2 和 div3，可以通過將它們再用一個 div 包起來，然後對它們設置左浮動，對父 div 設置右浮動來解決。
- 脫離文檔流，若父元素高度由內容撐開，那麼就撐不開，從圖中可以看到 wrap 沒了，因爲高度變爲了 0，可通過清浮動來解決。
- 文字會環繞在浮動元素周圍，圖中未表現出來。
- 不能換行，圖中未表現出來。
inline-block 行塊標籤
#div1, #div2, #div3{
display: inline-block;
}
橫排成功~但同樣有些問題：
inline-block 特點：
- 元素間會有空白。這個空白其實是空白符，因爲 inline-block 會使元素在行內排列，也就是跟文字在一起排列，而我們源代碼中 div 和 div 之間的空格、Tab、換行符在瀏覽器裏會被合併成一個空白符，所以就會出現縫隙，常見的解決方案有：
1.通過給父元素設置 font-size: 0; ，使空白符不可見。但會導致子元素中繼承的字體大小也爲 0，解決方案：
1.可以明確子元素內字體大小的，爲其單獨設置文字大小。
2.可以使用 rem 作爲字體大小單位來繼承 HTML 根元素的字體大小屬性。
2.在源代碼裏把前一個 div 的結束標籤和後一個 div 的開始標籤貼在一起。可讀性極差，醜拒。
<div id="wrap">
<div id="div1">div1
</div><div id="div2">div2
</div><div id="div3">div3</div>
</div>
3.不用 inline-block，嘿嘿~
- 可以換行，如下圖
![]()
flex 彈性盒模型
最愛的解決方案，給父元素設置 display: flex; 即可。
#wrap{
display: flex;
}
效果圖：
還可以通過 justify-content 屬性調整子元素的水平對齊方式：
#wrap{
display: flex;
justify-content: flex-start;
}
flex-start：
默認，圖同上。
flex-end：
center：
space-around：
space-between：
不過當父元素寬度不夠時， flex 默認是不會換行的，而是會等比例壓縮，縮放比例 flex-shrink 屬性或複合屬性 flex 相關。
通過 flex-wrap 屬性可以使其換行，該值有三個取值 nowrap、 wrap、 wrap-reverse，默認爲 nowrap。
#wrap{
display: flex;
flex-wrap: nowrap;
}
nowrap
默認，圖略。
wrap
wrap-reverse
flex 使用不再深入探討，推薦阮一峯寫的教程 Flex 佈局教程：語法篇