前端學習筆記教程不定期更新中，傳送門：

• 前端HTML第一天：什麼是網頁？什麼是HTML？網頁怎麼形成？
• HTML標簽大全
• 前端學習：表格學習，附練習+源碼
• 前端學習之列表，附送全套源碼
• CSS入門最全筆記
• CSS樣式表
• CSS之emmet語法
• CSS的復合選擇器
• CSS的顯示模式
• CSS背景：顏色、圖片、平鋪、背景圖片位置、背景圖像
• CSS三大特性：疊層性、繼承性、優先級
• 前端學習之CSS盒子模型以及PS基礎
• CSS之圓角邊框、盒子陰影、文字陰影

下面開始繼續更新內容，前面鏈接大傢用來查漏補缺哦。

一、浮動

1.1 傳統網頁佈局的三種方式

CSS提供瞭三種傳統佈局方式，簡單說就是盒子如何進行排列順序的：

• 普通流（標準流）
• 浮動
• 定位

這三種佈局方式都是用來擺放盒子的，盒子擺放到合適的位置佈局就自然完成瞭。

註意：實際開發中，一個頁面基本都包含瞭這三種佈局的方式（後面移動端我會更新新的佈局方式）

1.2 標準流

所謂的標準流: 就是標簽按照規定好默認方式排列

1. 塊級元素會獨占一行，從上向下順序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span、a、i、em 等

以上都是標準流佈局，我們前面學習的就是標準流，標準流是最基本的佈局方式。

1.3 為什麼需要浮動

總結： 有很多的佈局效果，標準流沒有辦法完成，此時就可以利用浮動完成佈局。 因為浮動可以改變元素標簽默認的排列方式.

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。

1.4 什麼是浮動

float 屬性用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。