當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

035_CSS浮动

發(fā)布時(shí)間：2025/4/17 CSS 91 豆豆

生活随笔收集整理的這篇文章主要介紹了 035_CSS浮动小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 浮動(dòng)的框可以向左或向右移動(dòng), 直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

2. 由于浮動(dòng)框不在文檔的普通流中, 所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

3. float屬性

3.1. 定義和用法

3.1.1. float屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像, 使文本圍繞在圖像周圍, 不過(guò)在CSS中, 任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框, 而不論它本身是何種元素。

3.1.2. 假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。

3.2. 默認(rèn)值

3.3. 可能的值

4. CSS浮動(dòng)

4.1. 請(qǐng)看下圖, 當(dāng)把框1向右浮動(dòng)時(shí), 它脫離文檔流并且向右移動(dòng), 直到它的右邊緣碰到包含框的右邊緣:

4.1.1. 代碼

<!DOCTYPE html> <html style="background: black;"><head><title>框1右浮動(dòng)</title><meta charset="utf-8" /></head><body style="background: yellow;"><div style="width: 180px; height: 180px; background: red; float: right;">框1</div><div style="width: 180px; height: 180px; background: blue;">框2</div><div style="width: 180px; height: 180px; background: green;">框3</div></body> </html>

4.1.2. 效果圖

4.2. 再請(qǐng)看下圖, 當(dāng)框1向左浮動(dòng)時(shí), 它脫離文檔流并且向左移動(dòng), 直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中, 所以它不占據(jù)空間, 實(shí)際上覆蓋住了框2, 使框2從視圖中消失。

4.2.1. 代碼

<!DOCTYPE html> <html style="background: black;"><head><title>框1左浮動(dòng)</title><meta charset="utf-8" /></head><body style="background: yellow;"><div style="width: 180px; height: 180px; background: red; float: left;"><sapn>框1</sapn></div><div style="width: 180px; height: 180px; background: blue;"><sapn>框2</sapn><img src="CrashBtn.png" /></div><div style="width: 180px; height: 180px; background: green;"><sapn>框3</sapn></div></body> </html>

4.2.2. 效果圖

4.3. 如果把所有三個(gè)框都向左移動(dòng), 那么框1向左浮動(dòng)直到碰到包含框, 另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。

4.3.1. 代碼

<!DOCTYPE html> <html style="background: black;"><head><title>框123左浮動(dòng)</title><meta charset="utf-8" /></head><body style="background: yellow; width: 600px; height: 600px;"><div style="width: 180px; height: 180px; background: red; float: left;"><sapn>框1</sapn></div><div style="width: 180px; height: 180px; background: blue; float: left;"><sapn>框2</sapn><img src="CrashBtn.png" /></div><div style="width: 180px; height: 180px; background: green; float: left;"><sapn>框3</sapn></div></body> </html>

4.3.2. 效果圖

4.4. 如下圖所示, 如果包含框太窄, 無(wú)法容納水平排列的三個(gè)浮動(dòng)元素, 那么其它浮動(dòng)塊向下移動(dòng), 直到有足夠的空間。如果浮動(dòng)元素的高度不同, 那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素"卡住":

4.4.1. 代碼

<!DOCTYPE html> <html style="background: black;"><head><title>框123左浮動(dòng)卡住</title><meta charset="utf-8" /></head><body style="width: 500px; height: 600px; background: yellow; "><div style="width: 180px; height: 180px; background: red; float: left;"><sapn>框1</sapn></div><div style="width: 180px; height: 180px; background: blue; float: left;"><sapn>框2</sapn><img src="CrashBtn.png" /></div><div style="width: 180px; height: 180px; background: green; float: left;"><sapn>框3</sapn></div><div style="width: 180px; height: 180px; background: red; float: left; clear: left;"><sapn>框1</sapn></div><div style="width: 180px; height: 100px; background: blue; float: left;"><sapn>框2</sapn><img src="CrashBtn.png" /></div><div style="width: 180px; height: 100px; background: green; float: left;"><sapn>框3</sapn></div></body> </html>

4.4.2. 效果圖

5. 行框和清理

5.1. 浮動(dòng)框旁邊的行框被縮短, 從而給浮動(dòng)框留出空間, 行框圍繞浮動(dòng)框。因此, 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:

5.1.1. 代碼

<!DOCTYPE html> <html><head><title>圍繞圖像的文本</title><meta charset="utf-8" /></head><body><img src="CrashBtn.png" style="float: left;" /><p style="background: blue;">5.1. 浮動(dòng)框旁邊的行框被縮短, 從而給浮動(dòng)框留出空間, 行框圍繞浮動(dòng)框。5.2. 因此, 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:</p><p style="background: green;">5.1. 浮動(dòng)框旁邊的行框被縮短, 從而給浮動(dòng)框留出空間, 行框圍繞浮動(dòng)框。5.2. 因此, 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:5.3. 要想阻止行框圍繞浮動(dòng)框, 需要對(duì)該框應(yīng)用clear屬性。clear屬性的值可以是left、right、both或none, 它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。</p></body> </html>

5.1.2. 效果圖

5.2. clear屬性

5.2.1. clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。

5.2.2. 在 CSS1和CSS2中, 這是通過(guò)自動(dòng)為清除元素(即設(shè)置了clear屬性的元素)增加上外邊距實(shí)現(xiàn)的。在CSS2.1 中, 會(huì)在元素上外邊距之上增加清除空間, 而外邊距本身并不改變。

5.2.3. 默認(rèn)值

5.2.4. 可能的值

5.3. 為了實(shí)現(xiàn)這種效果, 在被清理的元素的上外邊距上添加足夠的空間, 使元素的頂邊緣垂直下降到浮動(dòng)框下面:

5.3.1. 代碼

<!DOCTYPE html> <html><head><title>阻止行框圍繞浮動(dòng)框</title><meta charset="utf-8" /></head><body><img src="CrashBtn.png" style="float: left;" /><p style="background: blue;">5.1. 浮動(dòng)框旁邊的行框被縮短, 從而給浮動(dòng)框留出空間, 行框圍繞浮動(dòng)框。5.2. 因此, 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:</p><p style="background: green; clear: left;">5.1. 浮動(dòng)框旁邊的行框被縮短, 從而給浮動(dòng)框留出空間, 行框圍繞浮動(dòng)框。5.2. 因此, 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像:5.3. 要想阻止行框圍繞浮動(dòng)框, 需要對(duì)該框應(yīng)用clear屬性。clear屬性的值可以是left、right、both或none, 它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。</p></body> </html>

5.3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的035_CSS浮动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

_CSS