溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細(xì)介紹“css語(yǔ)言中漂浮的語(yǔ)法是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“css語(yǔ)言中漂浮的語(yǔ)法是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。
css語(yǔ)言中的漂浮語(yǔ)法為“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)。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css語(yǔ)言中，想要元素漂浮起來(lái)需要使用float屬性；該屬性指定一個(gè)盒子(元素)是否應(yīng)該浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。
float浮動(dòng)屬性的三個(gè)屬性值：
left 元素向左浮動(dòng)。
right 元素向右浮動(dòng)。
none 默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。
一、 CSS布局的三種機(jī)制
css提供了3種機(jī)制來(lái)設(shè)置盒子的擺放位置，分別是：普通流(標(biāo)準(zhǔn)流)、浮動(dòng)和定位，其中：
1、 普通流(標(biāo)準(zhǔn)流：“塊級(jí)元素”會(huì)獨(dú)占一行，“從上向下”排列；“行內(nèi)元素”會(huì)按照順序，“從左到右”排列，碰到父元素邊緣自動(dòng)換行；
2、 浮動(dòng)：讓盒子從普通流中“漂浮”起來(lái)，主要作用讓多個(gè)塊級(jí)盒子一行顯示。
3、定位：將盒子“定位”在某一個(gè)位置——CSS離不開(kāi)定位，特別是后面的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)最早是用來(lái)控制圖片，實(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屬性會(huì)讓盒子漂浮在標(biāo)準(zhǔn)流的上面，所以第二個(gè)標(biāo)準(zhǔn)流的盒子跑到浮動(dòng)盒子的底下了。
浮動(dòng)——漏漏漏~~~浮動(dòng)的盒子，把自己原來(lái)的位置漏給下面標(biāo)準(zhǔn)流的盒子，就是不占有原來(lái)位置，是脫離標(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)起來(lái)，不占位置 */
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給壓住了，遮擋起來(lái)了
浮動(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)塊元素，可以水平顯示，不過(guò) div 之間有間隙，不方便處理 */
/* display: inline-block; */
/* 設(shè)置浮動(dòng)屬性，可以讓 div 水平排列，并且沒(méi)有間隙 */
float: left;
}
.two {
background-color: hotpink;
}
浮動(dòng)的元素互相貼靠一起的，但是如果父級(jí)寬度裝不下這些浮動(dòng)的盒子， 多出的盒子會(huì)另起一行對(duì)齊
一、浮動(dòng)元素與父盒子的關(guān)系
- 子盒子的浮動(dòng)參照父盒子對(duì)齊。
- 不會(huì)與父盒子的邊框重疊，也不會(huì)超過(guò)父盒子的內(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)。防止引起問(wèn)題
ps：浮動(dòng)只會(huì)影響當(dāng)前的或者后面的標(biāo)準(zhǔn)流的盒子，不會(huì)影響前面的標(biāo)準(zhǔn)流
建議：如果一個(gè)盒子里面有多個(gè)盒子，如果其中的一個(gè)盒子浮動(dòng)了，其他兄弟也應(yīng)該浮動(dòng)。防止引起問(wèn)題
三、為什么要清除浮動(dòng)
因?yàn)楦讣?jí)盒子很多情況下，不方便給高度，但是子盒子浮動(dòng)就不占有位置，最后父級(jí)盒子高度為0，就影響了下面的標(biāo)準(zhǔn)流盒子。 !
結(jié)論：
由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)后面的元素排版產(chǎn)生影響
準(zhǔn)確地說(shuō)，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響
四、清除浮動(dòng)本質(zhì)
清除浮動(dòng)主要為了解決父級(jí)元素因?yàn)樽蛹?jí)浮動(dòng)引起內(nèi)部高度為0 的問(wèn)題。 清除浮動(dòng)之后， 父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度。 父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了
五、清除浮動(dòng)的四種方式
在CSS中，clear屬性用于清除浮動(dòng)
語(yǔ)法：
選擇器{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推薦的做法是通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽: 1.添加在浮動(dòng)元素最后 2.該元素必須是塊元素，行內(nèi)元素?zé)o效 --> <div style=”clear:both”></div>
優(yōu)點(diǎn)：通俗易懂，書(shū)寫(xiě)方便
缺點(diǎn)：添加許多無(wú)意義的標(biāo)簽，結(jié)構(gòu)化較差
2.父級(jí)添加overflow屬性方法
可以給父級(jí)添加： overflow為 hidden| auto| scroll 都可以實(shí)現(xiàn)。
優(yōu)點(diǎn)：代碼簡(jiǎn)潔
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素。
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)語(yǔ)義化正確
缺點(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)：代碼更簡(jiǎn)潔
缺點(diǎn)：由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。
標(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 的問(wèn)題。
清除浮動(dòng)一共有4中方式：
額外標(biāo)簽法(隔墻法)
父級(jí)添加overflow屬性方法
使用after偽元素清除浮動(dòng)
使用雙偽元素清除浮動(dòng)
讀到這里，這篇“css語(yǔ)言中漂浮的語(yǔ)法是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼