CSS 布局實例系列（四）如何實現容器中每一行的子容器數量隨着瀏覽器寬度的變化而變化？

Hello，小朋友們，還記得我是誰嗎？對了，我就是~超威~好啦，言歸正傳，今天的布局實例是：

實現一個浮動布局，紅色容器中每一行的藍色容器數量隨着瀏覽器寬度的變化而變化，就如下圖：

肯定有人心里犯嘀咕了，哈~這么簡單，不就是全部左浮動嘛，這也好意思拿出來講？別急啊，其實里面的坑還是挺多的，且待我一個個填上。

1. 通過左浮動實現

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>

2. 然后開始寫 CSS 吧，就像這樣：

   #float-container {
       background-color: red;
   }
   .float-element {
       float: left;
       width: 50px;
       height: 30px;
       background-color: blue;
       margin: 10px;
   }

   使每個小容器向左浮動，再設定一個邊距，一個根據瀏覽器寬度自適應變化位置的浮動布局就搞定收工了？當然不會，效果會像這樣：

3. 咦，說好的紅色背景大容器呢，怎么躲起來啦？檢查一番，原來是忘了給大容器 div 設定寬高度了，那就設定一下寬高度。既然要求了大容器自適應，那么我們就分別設定為 100% 吧：

   #float-container {
       background-color: red;
       height: 100%;
       width: 100%;
   }
   .float-element {
       float: left;
       width: 50px;
       height: 30px;
       background-color: blue;
       margin: 10px;
   }

   好啦，刷新一下。大容器咋還是沒出來？

4. 現在讓我們分析一下吧，為何看不見大容器？因為 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 查看源代碼整理，有任何問題也請盡情向我吐槽。