Hello，小朋友們，還記得我是誰嗎？對了，我就是~超威~好啦，言歸正傳，今天的布局實例是：
實現一個浮動布局，紅色容器中每一行的藍色容器數量隨著瀏覽器寬度的變化而變化，就如下圖：
肯定有人心里犯嘀咕了，哈~這么簡單，不就是全部左浮動嘛，這也好意思拿出來講？別急啊，其實里面的坑還是挺多的，且待我一個個填上。
1. 通過左浮動實現
- 要實現這樣一個布局，我們首先需要如下的 HTML：
<div id="float-container"><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div><div class="float-element"></div> </div>
- 然后開始寫 CSS 吧，就像這樣：
#float-container {background-color: red; } .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px; }
使每個小容器向左浮動，再設定一個邊距，一個根據瀏覽器寬度自適應變化位置的浮動布局就搞定收工了？當然不會，效果會像這樣：
- 咦，說好的紅色背景大容器呢，怎么躲起來啦？檢查一番，原來是忘了給大容器 div 設定寬高度了，那就設定一下寬高度。既然要求了大容器自適應，那么我們就分別設定為 100% 吧：
#float-container {background-color: red;height: 100%;width: 100%; } .float-element {float: left;width: 50px;height: 30px;background-color: blue;margin: 10px; }
好啦，刷新一下。
大容器咋還是沒出來？ -
現在讓我們分析一下吧，為何看不見大容器？因為 div 如果沒有包裹元素的話，百分比寬高度是不會產生效果的。
那么為什么大容器明明包裹著九個 div，百分比寬高度卻沒有產生效果呢？因為小容器都設定為左浮動，已經脫離文檔流，大容器并沒有包圍小容器，表現出高度為0（高度塌陷）。接下來我們想要大容器自適應，又不想使小容器失去浮動的特性，能夠隨著寬度變化自動調整每一行的個數，應該怎么辦？我們需要閉合浮動元素，使其包含框表現出正常的高度。是時候請出我們的 BFC 大神啦，對，我已經連續三篇實例博文提到 BFC 原理了，因為這個原理就是這么有用啊（該處原理的詳細介紹請參考一絲大神的《那些年我們一起清除過的浮動》）。現在我們在大容器加上 overflow: hidden; 就可以自動清理其包含的任何浮動元素，接下來看看最終的 DEMO，試著調整一下寬度，是不是已經實現了想要的效果？
See the Pen float-container by xal821792703 (@honoka) on CodePen.
2. 通過 inline-block 實現
只能通過左浮動完成這個實例？并不是，我們還有 inline-block。inline-block 可以像行內元素一樣水平地依次排列，但框的內容仍然符合塊級框的行為。通過這一特性，我們可以利用 inline-block 像浮動一樣創建很多網格鋪滿容器，并且不需要清除浮動。當然整個布局過程也比左浮動簡便了一些，如下面的 DEMO：
See the Pen inline-block-container by xal821792703 (@honoka) on CodePen.
?最后感謝大家的閱讀，歡迎前往我的?repo?查看源代碼整理，有任何問題也請盡情向我吐槽。
