day06_CSS布局之浮動的應用
本課目標（Objective）
- 理解什么是浮動
- 掌握浮動的三種機制
- 掌握浮動的案例應用
1 CSS 布局的三種機制
-
CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流（標準流）、浮動和定位。
-
普通流（標準流）
-
塊級元素會獨占一行，從上向下順序排列；
-
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
-
-
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
-
常用元素：span、a、i、em等
-
-
-
浮動
-
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
-
-
定位
-
將盒子固定在瀏覽器的某一個位置
-
-
-
案例：01.普通標準流.html
2 為什么需要浮動？
-
如何讓多個盒子(div)水平排列成一行？
-
如何實現盒子的左右對齊？
-
雖然我們前面學過行內塊（inline-block） 但是它有弊端：
-
它可以實現多個元素一行顯示，但是中間會有空白縫隙，不能滿足以上第一個問題。
-
它不能實現以上第二個問題，盒子左右對齊
-
-
案例：02.為什么要浮動.html
3 什么是浮動-float
-
概念：元素的浮動是指設置了浮動屬性的元素，會脫離標準普通流的控制，移動到指定位置。
-
讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
-
可以實現盒子的左右對齊等等。
-
-
通過
float屬性定義浮動，語法如下
選擇器 { float: 屬性值;
}| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
3.1 浮動例子演示
-
設置了浮動就會漂浮在普通流的上面。
-
float屬性會讓盒子漂浮在標準流的上面，所以第二個標準流的盒子跑到浮動盒子的底下了。 -
把自己原來的位置漏給下面標準流的盒子，就不占有原來的位置，是脫離標準流的。
-
-
案例：03.浮動例子演示.html
-
浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊
-
float屬性會改變元素display屬性，任何元素都可以浮動。浮動元素會生成一個塊級框，而無論它本身是何種元素。生成的塊級框和我們前面的行內塊極其相似。
-
加了浮動的盒子是不占位置的，它原來的位置給了標準流的盒子。
-
4 基于Float的應用案例
-
布局的時候需要給浮動的元素添加一個標準流，以最大化的減小對其他標準流的影響。
4.1 浮動應用案例1
-
案例：04.浮動應用案例1.html
4.2 浮動應用案例2
-
案例：05.浮動應用案例2.html
-
在制作導航欄過程中，一般不會直接用鏈接（a）標簽而是用li標簽包含鏈接的做法，li+a 語義更清晰。
5 浮動與盒子的關系設置
5.1 浮動元素與父盒子的關系
-
子盒子的浮動參照父盒子對齊
-
不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
-
案例：06.浮動元素與父盒子的關系.html
5.2 浮動元素與兄弟盒子的關系
-
在一個父級盒子中，如果前一個兄弟盒子是：
-
浮動的，那么當前盒子會與前一個盒子的頂部對齊；
-
普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方。
-
-
案例：07.浮動元素與兄弟盒子的關系.html
-
建議: 如果一個盒子里面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動。防止引起問題
6. 浮動清除
6.1 為什么要清除浮動
-
父級盒子在多數情況下不方便給高度，如果子盒子浮動就不占有位置，父級盒子的高度為0，就影響了下面的標準流盒子。
-
案例：08.標準流的盒子布局.html
-
案例：09.浮動如何影響盒子布局.html
-
由于浮動元素不再占用原標準流的位置，所以它會對后面的元素排版產生影響就需要清除浮動后造成的影響。
-
清除浮動主要為了解決父級元素高度為0時，子級浮動引發的遮蓋問題。清除浮動之后， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了。
6.2 清除浮動的方法
選擇器{clear:屬性值;}| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響（幾乎只用clear: both;） |
1. 額外標簽法(隔墻法)
-
10.清除浮動之額外標簽法.html
-
優點： 通俗易懂，書寫方便
-
缺點： 添加許多無意義的標簽，結構化較差。
-
/*清除浮動*/
.clear {clear: both;
}2. 父級添加overflow屬性方法
-
11.清除浮動之父級添加overflow.html
-
優點： 代碼簡潔
-
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
-
? ?
可以給父級添加： overflow屬性為hidden|auto|scroll都可以實現。overflow屬性的作用如下：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow3. 使用after偽元素清除浮動
-
:after 方式為空元素額外標簽法的升級版，好處是不用單獨加標簽了
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 專用 */-
優點： 結構語義化正確
-
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
-
代表網站： 百度、淘寶網、網易等
4. 使用雙偽元素清除浮動
使用方法：
.clearfix:before,.clearfix:after { content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}-
優點： 代碼更簡潔
-
缺點： 由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout
-
代表網站： 小米、騰訊等
6.3 清除浮動總結
| 清除浮動的方式 | 優點 | 缺點 |
|---|---|---|
| 額外標簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結構化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
)
