站長資訊網(wǎng)
css語言中的漂浮語法為“float:屬性值;”。float屬性用于定義元素在哪個(gè)方向浮動，會讓盒子（元素）漂浮在標(biāo)準(zhǔn)流的上面，其周圍的元素也會重新排列，直到它的外邊緣碰到包含框或另一個(gè)浮動框的邊框?yàn)橹?。該屬性有三個(gè)屬性值：1、“l(fā)eft”，定義元素向左浮動；2、“right”，定義元素向右浮動；3、“none”，定義元素不浮動。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動化測試一體化協(xié)作工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css語言中，想要元素漂浮起來需要使用float屬性；該屬性指定一個(gè)盒子(元素)是否應(yīng)該浮動。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個(gè)塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個(gè)明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個(gè)元素會跳至下一行，這個(gè)過程會持續(xù)到某一行擁有足夠的空間為止。
float浮動屬性的三個(gè)屬性值：
-
left 元素向左浮動。
-
right 元素向右浮動。
-
none 默認(rèn)值。元素不浮動，并會顯示在其在文本中出現(xiàn)的位置。
浮動
一、 CSS布局的三種機(jī)制
css提供了3種機(jī)制來設(shè)置盒子的擺放位置，分別是：普通流(標(biāo)準(zhǔn)流)、浮動和定位，其中：
1、 普通流(標(biāo)準(zhǔn)流：“塊級元素”會獨(dú)占一行，“從上向下”排列；“行內(nèi)元素”會按照順序，“從左到右”排列，碰到父元素邊緣自動換行；
2、 浮動：讓盒子從普通流中“漂浮”起來，主要作用讓多個(gè)塊級盒子一行顯示。
3、定位：將盒子“定位”在某一個(gè)位置——CSS離不開定位，特別是后面的js特效。
二、為什么需要浮動？
**概念：**元素浮動是指**設(shè)置了浮動屬性的元素會：**
- 脫離標(biāo)準(zhǔn)普通流的控制。
- 移動到指定位置。
作用：
- 讓多個(gè)盒子(div)水平排列成一行，使浮動成為布局的重要手段。
- 可以實(shí)現(xiàn)盒子的左右對齊等等…
- 浮動最早是用來控制圖片，實(shí)現(xiàn)文字環(huán)繞圖片的效果。
浮動口訣之——浮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: rgba(255,0,0,0.5); float: left; } .box2{ width: 300px; height: 150px; background-color: skyblue; } </style> </head> <body> <div></div> <div></div> </body> </html>
float屬性會讓盒子漂浮在標(biāo)準(zhǔn)流的上面，所以第二個(gè)標(biāo)準(zhǔn)流的盒子跑到浮動盒子的底下了。
浮動口訣之——漏
浮動——漏漏漏~~~浮動的盒子，把自己原來的位置漏給下面標(biāo)準(zhǔn)流的盒子，就是不占有原來位置，是脫離標(biāo)準(zhǔn)流的，我們俗稱 “脫標(biāo)”
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: rgba(255,0,0,0.5); /* 讓第一個(gè)盒子浮動起來，不占位置 */ float: left; } .box2{ width: 300px; height: 150px; background-color: skyblue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
所以，box2下面的其實(shí)就是跑到box1盒子下面了， 被box1給壓住了，遮擋起來了
浮動口訣之——特
浮動——特性 float屬性會改變元素display屬性。
任何元素都可以浮動。浮動元素會生成一個(gè)塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內(nèi)塊極其相似。
div { width: 200px; height: 200px; background-color: pink; /* 轉(zhuǎn)換為行內(nèi)塊元素，可以水平顯示，不過 div 之間有間隙，不方便處理 */ /* display: inline-block; */ /* 設(shè)置浮動屬性，可以讓 div 水平排列，并且沒有間隙 */ float: left; } .two { background-color: hotpink; }
浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊
浮動的擴(kuò)展
一、浮動元素與父盒子的關(guān)系
– 子盒子的浮動參照父盒子對齊。
– 不會與父盒子的邊框重疊，也不會超過父盒子的內(nèi)邊距。
二、浮動元素與兄弟盒子的關(guān)系
在一個(gè)父級盒子中，如果**前一個(gè)兄弟盒子**是：
- 浮動的，那么當(dāng)前盒子會與前一個(gè)盒子的頂部對齊；
- 普通流的，那么當(dāng)前盒子會顯示在前一個(gè)兄弟盒子的下方。
結(jié)論: 如果一個(gè)盒子里面有多個(gè)子盒子，如果其中一個(gè)盒子浮動了，其他兄弟也應(yīng)該浮動。防止引起問題
ps：浮動只會影響當(dāng)前的或者后面的標(biāo)準(zhǔn)流的盒子，不會影響前面的標(biāo)準(zhǔn)流
建議：如果一個(gè)盒子里面有多個(gè)盒子，如果其中的一個(gè)盒子浮動了，其他兄弟也應(yīng)該浮動。防止引起問題
三、為什么要清除浮動
因?yàn)楦讣壓凶雍芏嗲闆r下，不方便給高度，但是子盒子浮動就不占有位置，最后父級盒子高度為0，就影響了下面的標(biāo)準(zhǔn)流盒子。 !
結(jié)論：
- 由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響
- 準(zhǔn)確地說，并不是清除浮動，而是清除浮動后造成的影響
四、清除浮動本質(zhì)
清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題。 清除浮動之后， 父級就會根據(jù)浮動的子盒子自動檢測高度。 父級有了高度，就不會影響下面的標(biāo)準(zhǔn)流了
五、清除浮動的四種方式
在CSS中，clear屬性用于清除浮動
語法：
選擇器{clear:屬性值;} //clear 清除
| 屬性值 | 右描述 |
|---|---|
| left | 不允許左側(cè)有浮動元素(清除左側(cè)浮動的影響) |
| right | 不允許右側(cè)有浮動元素(清除右側(cè)浮動的影響) |
| both | 同時(shí)清除左右倆側(cè)浮動的影響 |
但是我們實(shí)際工作中， 幾乎只用 clear: both;
1.額外標(biāo)簽法(隔墻法)
<!-- 是W3C推薦的做法是通過在浮動元素末尾添加一個(gè)空的標(biāo)簽: 1.添加在浮動元素最后 2.該元素必須是塊元素，行內(nèi)元素?zé)o效 --> <div style=”clear:both”></div>
- 優(yōu)點(diǎn)：通俗易懂，書寫方便
- 缺點(diǎn)：添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差
2.父級添加overflow屬性方法
可以給父級添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)。
- 優(yōu)點(diǎn)：代碼簡潔
- 缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。
3.使用after偽元素清除浮動
after 方式為空元素額外標(biāo)簽法的升級版，好處是不用單獨(dú)加標(biāo)簽了
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { /* IE6、7 專有 */ *zoom: 1; }
- 優(yōu)點(diǎn)：符合閉合浮動思想 結(jié)構(gòu)語義化正確
- 缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
4.使用雙偽元素清除浮動
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
- 優(yōu)點(diǎn)：代碼更簡潔
- 缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
總結(jié)
-
標(biāo)準(zhǔn)流(普通流)在布局中 塊級元素會獨(dú)占一行，從上向下排列；行內(nèi)元素會按照順序，從左到右排列，碰到父元素邊緣則自動換行。
-
浮動的應(yīng)用場景大部分用于讓盒子水平排列成一行和控制圖片。
-
清除浮動主要為了解決父級元素因?yàn)樽蛹壐右饍?nèi)部高度為0 的問題。
-
清除浮動一共有4中方式：
-
額外標(biāo)簽法(隔墻法)
-
父級添加overflow屬性方法
-
使用after偽元素清除浮動
-
使用雙偽元素清除浮動
-
（學(xué)習(xí)視頻分享：web前端）
