CSS基础(part13)--浮动
生活随笔
收集整理的這篇文章主要介紹了
CSS基础(part13)--浮动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習筆記，僅供參考，有錯必糾
參考自：某不知名網課
文章目錄
- 浮動
- CSS布局的三種機制
- 為何需要浮動(float)
- 浮動的語法
- 浮動的3種特性
- 浮動元素與父盒子的關系
- 浮動元素與兄弟盒子的關系
- 清除浮動
- 為什么要清除浮動
- 清除浮動的方法
- 清除浮動總結
浮動
CSS布局的三種機制
CSS 提供了 3 種機制來設置盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：
-
普通流（標準流）
- 塊級元素會獨占一行，自上向下順序排列；
- 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
- 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
- 常用元素：span、a、i、em等
- 塊級元素會獨占一行，自上向下順序排列；
-
浮動
- 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
-
定位
- 將盒子定在瀏覽器的某一個位置。
為何需要浮動(float)
如果我們想要多個盒子(div)水平排列成一行，可以使用浮動來實現.
- 舉個例子
沒有設置浮動的盒子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 100px;height: 100px;background-color: pink;}.demo2 {background-color: red;}.demo3 {background-color: blue;}</style> </head> <body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div> </body> </html>頁面：
設置了浮動的盒子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>div {width: 100px;height: 100px;background-color: pink;}.demo1 {float: left;}.demo2 {background-color: red;float: left;}.demo3 {background-color: blue;float: left;}</style> </head> <body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div> </body> </html>頁面：
浮動的語法
語法：
選擇器 { float: 屬性值; }屬性：
| none | 元素不浮動（默認值） |
| left | 元素向左浮動 |
| right | 元素向右浮動 |
浮動的3種特性
- 浮在標準流盒子的上方
- 把原來的位置漏給標準流的盒子
- 改變元素display屬性
任何元素都可以浮動，不論它本身是何種元素。浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙。
浮動元素與父盒子的關系
子盒子不會與父盒子的邊框重疊，也不會超過父盒子的內邊距.
- 舉個例子
HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 300px;height: 300px;border: 20px solid green;padding: 30px;background-color: pink;}.son {float: right;width: 100px;height: 100px;background-color: red;}</style> </head> <body><div class="father"><div class="son"></div></div> </body> </html>頁面：
浮動元素與兄弟盒子的關系
在同一個父級盒子中，如果前一個兄弟盒子是：
- 浮動的：那么當前盒子會與前一個盒子的頂部對齊；
- 普通流的：那么當前盒子會顯示在前一個兄弟盒子的下方。
圖示：
- 舉個例子
前一個兄弟盒子是浮動的：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 500px;height: 500px;background-color: pink;}.son1 {float: left;width: 100px;height: 100px;background-color: red;}.son2 {float: left;width: 200px;height: 200px;background-color: blue;}</style> </head> <body><div class="father"><div class="son1"></div><div class="son2"></div></div> </body> </html>頁面：
前一個兄弟盒子不是浮動的：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 500px;height: 500px;background-color: pink;}.son1 {width: 100px;height: 100px;background-color: red;}.son2 {float: left;width: 200px;height: 200px;background-color: blue;}</style> </head> <body><div class="father"><div class="son1"></div><div class="son2"></div></div> </body> </html>頁面：
清除浮動
為什么要清除浮動
首先，我們看下面這一段代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 400px;background-color: pink;}.son1 {width: 100px;height: 100px;background-color: red;}.son2 {width: 200px;height: 200px;background-color: blue;}.mother {width: 500px;height: 100px;background-color: brown;}</style> </head> <body><div class="father"><div class="son1"></div><div class="son2"></div></div><div class="mother"></div> </body> </html>頁面：
在上述代碼中，我們沒有設置father的高度(height)，設置了son1和son2的高度，可以看到father被兩個son撐開了，而mother則在father的下面。
此時，如果我們設置兩個son為浮動，那么會導致father的height為0，且mother會漏到兩個son的下方：
這時，我們可以清除浮動，清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之后， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
清除浮動的方法
語法：
選擇器{clear: 屬性值;}屬性：
| left | 不允許左側有浮動元素（清除左側浮動的影響） |
| right | 不允許右側有浮動元素（清除右側浮動的影響） |
| both | 同時清除左右兩側浮動的影響 |
- 額外標簽法(隔墻法)
首先，我們在farther的兩個son下增加一個div標簽，再設置其clear屬性：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 400px;background-color: pink;}.son1 {float: left;width: 100px;height: 100px;background-color: red;}.son2 {float: left;width: 200px;height: 200px;background-color: blue;}.clear {clear: both;}.mother {width: 500px;height: 100px;background-color: brown;}</style> </head> <body><div class="father"><div class="son1"></div><div class="son2"></div><div class="clear"></div></div><div class="mother"></div> </body> </html>頁面：
- 父級添加overflow屬性方法
我們也可以給father加一個overflow屬性：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.father {width: 400px;background-color: pink;overflow: hidden;}.son1 {float: left;width: 100px;height: 100px;background-color: red;}.son2 {float: left;width: 200px;height: 200px;background-color: blue;}.mother {width: 500px;height: 100px;background-color: brown;}</style> </head> <body><div class="father"><div class="son1"></div><div class="son2"></div></div><div class="mother"></div> </body> </html>- 使用after偽元素清除浮動
我們直接把下面這兩行代碼加到style標簽中去，并且在body的father中添加class值clearfix：
.clearfix:after {content: "";display: block;height: 0;visibility: hidden;clear: both; } .clearfix {*zoom: 1; }HTML代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CSS盒子</title><style>.clearfix:after {content: "";display: block;height: 0;visibility: hidden;clear: both;}.clearfix {*zoom: 1;}.father {width: 400px;background-color: pink;}.son1 {float: left;width: 100px;height: 100px;background-color: red;}.son2 {float: left;width: 200px;height: 200px;background-color: blue;}.mother {width: 500px;height: 100px;background-color: brown;}</style> </head> <body><div class="father clearfix"><div class="son1"></div><div class="son2"></div></div><div class="mother"></div> </body> </html>- 使用雙偽元素清除浮動
我們直接把下面這兩行代碼加到style標簽中去，并且像上面一樣，在body的father中添加class值clearfix：
.clearfix:before, .clearfix:after { content: "";display: table; } .clearfix:after {clear: both; } .clearfix {*zoom:1 ; }清除浮動總結
什么時候用清除浮動？
| 額外標簽法（隔墻法） | 通俗易懂，書寫方便 | 添加許多無意義的標簽，結構化較差。 |
| 父級overflow:hidden; | 書寫簡單 | 溢出隱藏 |
| 父級after偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
| 父級雙偽元素 | 結構語義化正確 | 由于IE6-7不支持:after，兼容性問題 |
總結
以上是生活随笔為你收集整理的CSS基础(part13)--浮动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 植物大战僵尸2攻略大全 植物大战僵尸2存
- 下一篇： CSS基础(part14)--定位