本文由 KnewHow 發表在 ScalaCool 團隊部落格。
上一篇部落格是我們《後端工程師入門前端頁面重構》系列的第一篇，我們介紹了頁面佈局的口訣：
從左到右，從上到下，化整為零。
那麼在接下來的幾篇文章中，我們就來聊聊頁面佈局的「心法」和一些具體的「招式」。
那麼什麼是心法呢？
如果說口訣是頁面佈局的原則，那麼心法就是對頁面佈局中一些重要概念的認識。
在上一篇文章，我們一直推薦使用高效的浮動佈局，類似大家都玩過的磁鐵，在磁鐵的周圍，所有的鐵塊會被磁鐵所吸引。
那麼浮動就好比頁面上的一塊磁鐵，它會吸引頁面上的元素塊，讓它們朝一個方向進行組合、包含、交疊，進而完成整個頁面的佈局。
下面就讓我們來看看頁面中元素有什麼型別。
HTML 塊狀元素和行內元素
在我們熟知的頁面佈局中，網頁的標題，logo等都是有高度和寬度的。我們來看下面的豆瓣首頁的切圖：
在上面的圖片中，我們使用紅色的線條和文字標註豆瓣 logo 的高度和寬度。不僅僅是 logo 圖有高度和寬度，搜尋框，熱搜主題等其它元素，幾乎都有高度和寬度。
那麼在 HTML 語言中，我們如何指定元素的高度和寬度呢？
我們先來寫一段 HTML：
<div>這是 div 標籤裡面的內容</div>
<span>這是 span 標籤的內容</span>
複製程式碼然後給它們定義樣式：
div {
background-color: red;
height: 100px;
width: 100px;
}
span {
background-color: green;
height: 100px;
width: 100px;
複製程式碼效果如下：
發現一個問題：
我們設定的高度和寬度只對 div 標籤產生效果，對 span 標籤沒有產生效果。這是為什麼呢？
其實在 HTML 中，我們可以把標籤分為「塊狀元素」和「行內元素」，上面程式碼中的 div 標籤就是塊狀元素，而 span 標籤就是行內元素。
那麼這兩類元素有什麼區別呢？
從我們的程式碼的效果圖裡面我們已經看出來一個區別了：塊狀元素可以設定它的高度和寬度，行內元素對的高度和寬度的設定是無效。
我們把上面元素的寬度和高度都刪除，讓 div 標籤和 span 標籤保持原始的高度和寬度來看看效果。
是不是又看出來一個區別呢？
塊狀元素是獨佔一行的，而行內元素只佔本身內容的大小。
看看我們之前設定高度和寬度的例子，我們用瀏覽器檢查一下看看。
即使我們設定了塊狀元素的高度和寬度，它還是獨佔一行的。真的是霸道啊！
然而，現實中的網頁（如豆瓣），很多內容塊都是拼接的，如果我們使用塊狀元素來表示這些內容塊，如果消除它獨佔一行的情況呢？
關於這個問題，似乎有兩種解決方案。
inline-block
其實在 css 的 diplay 屬性中，有一個屬性值 inline-block 可以將標籤呈現出「塊狀元素」和「行內元素」之間的中間態，即它可以擁有寬高度的同時，也可以具備行內元素的佔位屬性。
<div>123</div>
<div>123</div>
複製程式碼然後給它們定義樣式：
div {
background-color: red;
display: inline-block;
}
複製程式碼看效果：
我們發現雖然兩個 div 可以變成行內元素在一行顯示，但是它們之間還是存在空白，不能完美的相鄰在一起。這點空白會讓我們的佈局很不美觀！
浮動
上面我們說了，浮動可以把頁面上的元素往某一個方向吸引，那麼如何吸引呢？
在 CSS 中，我們可以通過 float:left 把元素往左邊吸引
<div style="background-color: red">這是第一個區塊</div>
<div style="background-color: green">這是第二個區塊</div>
複製程式碼使用浮動：
div {
width: 200px;
height: 200px;
float: left;
}
複製程式碼看效果：
我們發現，通過浮動，可以使兩個原本很難相鄰在一起的塊狀元素，完美 的相鄰在一起。
使用 left 是把元素往左邊吸引，而 right 是把元素往右邊吸引。
那麼當浮動和元素巢狀結合會發生什麼呢？
父元素高度
在頁面佈局中，元素巢狀使用是非常常見的，如下面的程式碼。
<div class="parent">
<div class="child1">
first child
</div>
</div>
複製程式碼.child1 {
background-color: red;
}
複製程式碼此時，子元素的高度是自適應的，也就是當前瀏覽器顯示的文字高度，如果對頁面進行縮放，子元素高度就會變化。
而父元素包含著子元素，而且父元素裡面沒有其它元素，因此父元素的高度等於子元素的高度。
我們也可以使用 height來設定子元素的高度，讓它不自適應。
在實際開發中，經常需要使用一個父元素巢狀一些浮動元素，現在我們就來設定子元素為浮動元素。
.child1 {
background-color: red;
float: left;
height: 100px;
}
複製程式碼我們發現父元素的高度竟然變成了０。
我們嘗試再新增一個非浮動的子元素時，我們發現，父元素的高度等於第二個非浮動子元素的高度，完全忽視了第一個浮動子元素的存在。
<div class="child2">
second child
</div>
複製程式碼.child2 {
background-color: green;
height: 50px;
}
複製程式碼而當我們把第二個子元素設定為浮動的時候，父元素的高度又再度變成了０。
按照上面的方法，新增第三個元素的時候，效果也是相同的。
通過上面的例子，我們可以得出一個結論：父元素的高度由最後一個非浮動子元素的佔位空間所決定。
但是在頁面佈局中，浮動佈局的佔位空間往往是我們理想的容器父元素的高度，那麼我們如何解決這個問題呢？
清除浮動
使用清除浮動就可以解決上面的問題，具體的做法是在父元素的最後新增一個空的元素，並在設定它為清除浮動。
<div class="child3">
</div>
複製程式碼.child3 {
clear: left;
}
複製程式碼我們發現父元素的高度等於浮動元素的佔位空間。
clear: left; 就是讓左浮動元素持有佔位空間
讓我們再來擴充一下，clear 除了可以設定為 left，還可以設定為 right 和 both。
right 就是讓右浮動元素持有佔位空間。
both 就是讓兩邊的浮動元素都持有佔位空間。
浮動佈局--最佳實踐
在上面的程式碼中，我們是直接手動的在父元素最後新增空元素。那麼能不能有一種方法，可以自動的幫我們新增元素並在設定清除浮動呢？
回答是肯定的！
在 CSS 中，我們可以使用 「after 選擇器」 來實現新增元素，並且設定屬性，具體的用法可以參考:W3C after 選擇器
下面直接給出程式碼：
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
複製程式碼-
在IE6, 7下
zoom: 1會觸發 hasLayout，從而使元素閉合內部的浮動。 -
在標準瀏覽器下，
.clearfix:after這個偽類會在應用到.clearfix的元素後面插入一個clear: both的塊級元素，從而達到清除浮動的作用。
只要父元素引用了這個 class，就可以自動的實現清除浮動，再也不用擔心高度和子元素的佔位問題了。
心法小結
最後，我們再來回顧一下文章介紹的一些心法：
1. HTML 分為塊狀元素和行內元素的，塊狀元素是獨佔一行的
2. 浮動佈局相對行內元素的佈局，往往更利於精確計算間距
3. 預設情況下，父元素的高度由最後一個非浮動子元素的佔位空間所決定
4. 浮動佈局的佔位空間往往是我們理想的容器父元素的高度
5. 清除浮動可以解決浮動元素的佔位空間問題
文章中的一些招式可能說的太粗糙，先不用捉急，我們先學心法，招式到後面再專門的學習。
我會在下一篇博文繼續介紹心法 II。