前端新人學習路徑（3/26）

前言

在上一篇中，我們說了元素的分類，其中塊元素是獨佔一行的，我們有一個遺留問題，如何讓塊元素可以與其他元素在同一行顯示？這就涉及道浮動布局的概念，浮動布局就是我們今天的主題。

一、表格布局與浮動布局

在很久很久以前，網頁是通過表格元素來布局的，使用表格布局的優點是：

• 結構簡單
• 易於上手
• 瀏覽器兼容性好

但是表格布局的缺點也很明顯，那就是難於維護，無法適應不斷變化的網頁內容。

隨後，替換表格的布局出現了，以前大家都喜歡叫div+css布局，但是現在叫做浮動布局還是比較確切的。

這種布局的主要特點：

• 把網頁的內容放在div中，讓他變成一個個盒子（邊距就用我們上篇說的盒子模型解決）
• 然後通過元素浮動（float屬性），讓每一個盒子擺在他應該在的位置上。

這就是浮動布局最基本的概念。

二、元素浮動

上一篇我們說過，塊元素自己獨佔一行，即使我們把它的寬度值設置的非常小，它仍然獨佔一行。那麼如何能讓塊元素與其他元素可以在一行顯示呢，我們可以給塊元素設置浮動屬性，代碼如下所示

div{ float:left}

將兩個元素都設置成左浮動，並且兩個元素的寬度之和不超過瀏覽器窗口的寬度，那麼兩個元素就可以在同一行顯示了。

一般網站導航，就是用無序列表（ul li標籤），讓所有的li標籤浮動後在一行顯示（我們在案例源碼有網站導航的案例）。

偽類選擇器

偽類選擇器可以讓css具有一定的行為特性，可以在選擇器後面添加:hover，這樣當滑鼠懸浮在這個元素之上的時候，這個元素就會應用偽類選擇器指定的樣式。

我們利用ul和li標籤製作網站導航之後，可以偽類選擇器進一步增強效果，代碼如下：

li{ /* 導航的樣式 */}li:hover{ background-color:blue;}

利用偽類選擇器，當滑鼠經過li的時候，li的背景會變成藍色。

三、清除浮動

浮動的不良影響

我們在網站導航的下方添加一個標題，大家可以看到標題的內容與導航重疊了，這是因為浮動元素會脫離html文檔流，導致浮動元素不佔位。所以下方的元素就會與浮動元素重疊，為了解決這個問題，我們需要清除浮動元素對前後相鄰元素的影響。

偽元素

清除元素浮動有很多方法，我們就說一種最常用也是最好用的一種方法，就是用偽元素清楚浮動。這裡我們說說偽元素的基本概念：

• 偽元素就是在css中設置的，與html標籤效果相同的元素。
• 在css2版本中，偽元素用一個冒號後面跟before或after（:before,:after）。
• 在css3版本中，為了區分偽元素與偽類選擇器，所以再偽元素前加兩個冒號（::before,::after）。

為一個選擇器添加偽元素::before或::after，那麼這個選擇器找到的所有html標籤的前或後方都會新增一個元素，這個元素是偽元素中content屬性定義的。

.list::after{ content:"hello";

上面的樣式中，.list選擇器找到的所有元素，其後方都會追加一個"hello"。

利用偽元素清楚浮動

我們先定義一個類選擇器，並給它添加偽元素，樣式設置如下：

.clear::before,.clear::after{ content:""; display:block; clear:both;}

這樣，有需要清除浮動的元素，我們只要給他添加class的值為clear就可以了。

四、總結

本節我們一起聊了元素浮動和清楚浮動的方法，同時還有偽類選擇器和偽元素的相關概念。除了我們本篇說的偽類選擇器和偽元素，其實還有很多其他的偽類選擇器和偽元素，有興趣的話，日後可以翻閱文檔查看。

學習就是這樣，有的時候需要不求甚解，有的時候需要精益求精，尺度把握的不好，就會嚴重影響學習效率。

• 關於清除浮動，有很多好的方法，完全可以開一個主題來學習。
• 關於偽元素，也可以單獨整理它們的用法。
• 關於布局，除了浮動布局，CSS3新增的flex布局，還有基於媒體查詢和百分比的響應式布局，都可以單獨研究。

總之，知識是無窮無盡的，但是還是那句話，先把JavaScript學明白，再來看那些知識，效率會更高。

五、資料

如果您在練習的過程中經常出現問題，可以關注微信公眾號：曉舟報告，獲取案例源碼（有注釋）和學習素材，以便於您更高效地學習，本節的案例如下所示：

• demo01:div浮動
• demo02:製作導航欄（列表浮動）
• demo03:偽類選擇器
• demo04:偽元素的使用
• demo05:偽元素清除浮動
• demo06:網站整體布局（使用外部樣式）

六、尾聲

如果您覺得有收穫，請不要吝惜一個小小的【贊】，如果喜歡類似的文章，可以關注微信公眾號：曉舟報告，第一時間獲取文章。