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