JOISC 2020 Day 3
浮動
前言
CSS 提供了三種傳統佈局方式，簡單說就是盒子如何進行排列：
- 普通流（標準流）
- 浮動
- 定位
標準流（普通流/文件流）
所謂的標準流: 就是標籤按照規定好預設方式排列
-
塊級元素會獨佔一行，從上向下順序排列。
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
常用元素：span、a、i、em 等
以上都是標準流佈局，標準流是最基本的佈局方式。 這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了。
注意：實際開發中，一個頁面基本都包含了這三種佈局方式（後面移動端學習新的佈局方式）。
為什麼需要浮動
有很多的佈局效果，標準流沒有辦法完成，此時就可以利用浮動完成佈局。 因為浮動可以改變元素標籤預設的排列方式.。
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
網頁佈局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
什麼是浮動
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
Float（浮動），往往是用於影象，但它在佈局時一樣非常有用。
語法
選擇器 { float: 屬性值; }
屬性
| 屬性 | 描述 | 值 |
|---|---|---|
| clear | 指定不允許元素周圍有浮動元素。 | left right both none inherit |
| float | 指定一個盒子（元素）是否可以浮動。 | left right none inherit |
浮動的特點
加了浮動之後的元素，會具有很多特性，需要我們掌握的。
- 浮動元素會脫離標準流(脫標)
- 浮動的元素會一行內顯示並且元素頂部對齊
- 浮動的元素會具有行內塊元素的特性.
脫離標準普通流
這也是浮動（float）元素的最重要特性
- 脫離標準普通流的控制（浮）移動到指定位置（動），漂浮在標準流的上方，俗稱脫標
- 浮動的盒子不再保留原先的位置
排列方式
如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列
注意： 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會擠到下一行對齊。
具有行內塊元素特性
浮動元素會具有行內塊元素特性。
任何元素都可以浮動。不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性
- 塊級盒子沒有設定寬度，預設寬度和父級一樣寬，但是新增浮動後，它的大小根據內容來決定
- 浮動的盒子中間是沒有縫隙的，是緊挨著一起的
- 行內元素同理
浮動佈局注意點
1、浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置，網頁佈局一般採取的策略是: 先用標準流的父元素排列上下位置， 之後內部子元素採取浮動排列左右位置。 符合網頁佈局第一準側。
注意上圖若再有一個浮動子盒子，則會擠到下一行，但也會在父盒子的寬度內，即標準流父盒子只能約束浮動子盒子的左右浮動範圍
2、一個元素浮動了，理論上其餘的兄弟元素也要浮動
一個盒子裡面有多個子盒子，如果其中一個盒子浮動了，為防止引起問題，其他兄弟也應該浮動
3、浮動的盒子只會影響後面的標準流，不會影響前面的標準流.
例如有三個盒子
若給藍色盒子設定浮動，紅色盒子會填補藍色盒子的位置並被藍色盒子覆蓋
若給紅色盒子設定浮動，紅色盒子會覆蓋藍色盒子嗎，答案是不會的，浮動元素只會影響到後面的標準流元素，即紅色盒子雖然脫離了標準流，但還是無法跨越它之前的標準流藍色盒子，此時黃色盒子會填補紅色盒子的位置，被紅色盒子覆蓋
清除浮動
思考
我們前面浮動元素有一個標準流的父元素， 他們有一個共同的特點，都是有高度的。 但是， 所有的父盒子都必須有高度嗎？理想中的狀態， 讓子盒子撐開父親。 有多少孩子，我父盒子就有多高。但是不給父盒子高度會有問題…..
為什麼要清除浮動
由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不佔有位置，最後父級盒子高度為 0 時，就會影響下面的標準流盒子。所以它會對後面的元素排版產生影響
清除浮動本質
- 清除浮動的本質是清除浮動元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之後，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
方法
- 額外標籤法也稱為隔牆法，是 W3C 推薦的做法。
- 父級新增 overflow 屬性
- 父級新增after偽元素
- 父級新增雙偽元素
額外標籤法
額外標籤法也稱為隔牆法，是 W3C 推薦的做法。 額外標籤法會在浮動元素末尾新增一個空的標籤。例如 <div style="clear:both"></div>，或者其他標籤（如<br />等）。
優點： 通俗易懂，書寫方便
缺點： 新增許多無意義的標籤，結構化較差
注意： 要求這個新的空標籤必須是塊級元素。
總結:
清除浮動本質是? 清除浮動的本質是清除浮動元素脫離標準流造成的影響
清除浮動策略是? 閉合浮動. 只讓浮動在父盒子內部影響，不影響父盒子外面的其他盒子
額外標籤法? 隔牆法， 就是在最後一個浮動的子元素後面新增一個額外標籤， 新增 清除浮動樣式。 實際工作可能會遇到，但是不常用
父級新增 overflow
可以給父級新增 overflow 屬性，將其屬性值設定為 hidden、 auto 或 scroll ，常用就是hidden屬性
:after 偽元素法
:after 方式是額外標籤法的升級版。也是給父元素新增 ，直接複製貼上下面程式碼
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 專有 */
*zoom: 1;
}