| 前言 |
day4主要講述了一個重點，那就是浮動
其中包含，什麼是浮動？浮動的作用語法及浮動的清除等
1、CSS的三種佈局機制
CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：
1）普通流（標準流）
- 塊級元素會獨佔一行，從上向下順序排列；
常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
常用元素：span、a、i、em等
2）浮動
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示
3）定位
- 將盒子固定在瀏覽器的某一個位置上
2、浮動
2.1爲什麼需要浮動？
爲了達到網頁佈局的需要，需要用浮動來完成對網頁的佈局，如將多個盒子（div）水平排列成一行、實現盒子的左右對齊效果等
2.2什麼是浮動
浮動指脫離控制，能夠移動到制定的位置
2.3浮動的語法
選擇器 { float: 屬性值; }
2.4浮動的屬性
| 屬性值 | 描述 |
|---|---|
| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
2.5浮動元素與父盒子的關係
- 子盒子的浮動參照父盒子對齊
- 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
![在這裏插入圖片描述]()
2.6浮動元素與兄弟盒子的關係
在一個父級盒子中，如果前一個兄弟盒子是：
- 浮動的，那麼當前盒子會與前一個盒子的頂部對齊；
- 普通流的，那麼當前盒子會顯示在前一個兄弟盒子的下方。
- 一般情況下，父盒子中的一個子盒子浮動了，其他子盒子也應該浮動
3、清除浮動（特別重要）
3.1爲什麼要清除浮動
父盒子一般不設置高度，因爲設置高度後子盒子會撐開父盒子，浮動元素不佔有位置，但會對排版產生影響，清除浮動的本質就是爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題
3.2清除浮動的方法
1）通過clear清除
- 語法
選擇器{clear:屬性值;} clear 清除
- 屬性
| 屬性值 | 描述 |
|---|---|
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
2）父級添加overflow屬性方法
可以給父級添加： overflow爲 hidden| auto| scroll
完！歡迎評論區留言