本文由 knewhow 發表在 scalacool 團隊部落格。
從左到右，從上到下，化整為零。
那麼在接下來的幾篇文章中，我們就來聊聊頁面布局的「心法」和一些具體的「招式」。
那麼什麼是心法呢？
如果說口訣是頁面布局的原則，那麼心法就是對頁面布局中一些重要概念的認識。
那麼浮動就好比頁面上的一塊磁鐵，它會吸引頁面上的元素塊，讓它們朝乙個方向進行組合、包含、交疊，進而完成整個頁面的布局。
下面就讓我們來看看頁面中元素有什麼型別。
在我們熟知的頁面布局中，網頁的標題，logo等都是有高度和寬度的。我們來看下面的豆瓣首頁的切圖：
那麼在 html 語言中，我們如何指定元素的高度和寬度呢？
我們先來寫一段 html：
這是 div 標籤裡面的內容div>
這是 span 標籤的內容span>
複製**
div
span
複製**
我們發現雖然兩個 div 可以變成行內元素在一行顯示，但是它們之間還是存在空白，不能完美的相鄰在一起。這點空白會讓我們的布局很不美觀！
上面我們說了，浮動可以把頁面上的元素往某乙個方向吸引，那麼如何吸引呢？ 在 css 中，我們可以通過float:left把元素往左邊吸引
style="background-color: red">這是第乙個區塊div>
style="background-color: green">這是第二個區塊div>
複製**
div
複製**
我們發現，通過浮動，可以使兩個原本很難相鄰在一起的塊狀元素，完美的相鄰在一起。
使用left是把元素往左邊吸引，而right是把元素往右邊吸引。
那麼當浮動和元素巢狀結合會發生什麼呢？
在頁面布局中，元素巢狀使用是非常常見的，如下面的**。
class="parent">
class="child1">
first child
div>
div>
複製**
.child1
複製**
此時，子元素的高度是自適應的，也就是當前瀏覽器顯示的文字高度，如果對頁面進行縮放，子元素高度就會變化。
而父元素包含著子元素，而且父元素裡面沒有其它元素，因此父元素的高度等於子元素的高度。
我們也可以使用height來設定子元素的高度，讓它不自適應。
在實際開發中，經常需要使用乙個父元素巢狀一些浮動元素，現在我們就來設定子元素為浮動元素。
.child1
複製**
我們發現父元素的高度竟然變成了０。
我們嘗試再新增乙個非浮動的子元素時，我們發現，父元素的高度等於第二個非浮動子元素的高度，完全忽視了第乙個浮動子元素的存在。
class="child2">
second child
div>
複製**
.child2
複製**
而當我們把第二個子元素設定為浮動的時候，父元素的高度又再度變成了０。
按照上面的方法，新增第三個元素的時候，效果也是相同的。
通過上面的例子，我們可以得出乙個結論：父元素的高度由最後乙個非浮動子元素的佔位空間所決定。
但是在頁面布局中，浮動布局的佔位空間往往是我們理想的容器父元素的高度，那麼我們如何解決這個問題呢？
使用清除浮動就可以解決上面的問題，具體的做法是在父元素的最後新增乙個空的元素，並在設定它為清除浮動。
class="child3">
div>
複製**
.child3
複製**
我們發現父元素的高度等於浮動元素的佔位空間。
clear: left;就是讓左浮動元素持有佔位空間
讓我們再來拓展一下，clear除了可以設定為left，還可以設定為right和both。
right就是讓右浮動元素持有佔位空間。
both就是讓兩邊的浮動元素都持有佔位空間。
在上面的**中，我們是直接手動的在父元素最後新增空元素。那麼能不能有一種方法，可以自動的幫我們新增元素並在設定清除浮動呢？
回答是肯定的！
在 css 中，我們可以使用 「after 選擇器」 來實現新增元素，並且設定屬性，具體的用法可以參考:w3c after 選擇器
下面直接給出**：
.clearfix
:after
.clearfix
複製**
1. html 分為塊狀元素和行內元素的，塊狀元素是獨佔一行的
2. 浮動布局相對行內元素的布局，往往更利於精確計算間距
3. 預設情況下，父元素的高度由最後乙個非浮動子元素的佔位空間所決定
4. 浮動布局的佔位空間往往是我們理想的容器父元素的高度
5. 清除浮動可以解決浮動元素的佔位空間問題
文章中的一些招式可能說的太粗糙，先不用捉急，我們先學心法，招式到後面再專門的學習。
php工程師是後端嗎
php技術人才，正迎合了目前的網際網路的發展趨勢 php作為非常優秀的 簡便的web開發語言，和linux，apache，mysql緊密結合，形成lamp的開源 組合，不僅降低使用成本，還提公升了開發速度，滿足最新的互動式網路開發的應用，這使得php軟體工程師成為乙個發展迅速的職業。php工程師是後...
母雞與前端工程師
1 新聞說，2016年全國高校畢業生達到空前的756萬，又趕上很多傳統行業壓縮產能，就業壓力很大。很多曾經的 明星專業 都已經就業困難。我考大學的時候，國際 是最熱門的專業之一，大家認定這個專業容易賺錢。但是現在這個專業的畢業生，想找乙份好工作會很難，上海將它列入10大預警專業，即最難就業的十個專業...
未來的前端工程師
作者簡介 aoto 螞蟻金服 資料體驗技術團隊 以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。前端工程師首先是個程式設計師，其次也是個軟體工程師，他們工作在離使用者最近的地方，負責人機互動和使用者體驗，雖然叫 前端 但其實他們的工作邊界其實已...