035_CSS浮动
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;"><!-- 這里有內(nèi)容塌陷問(wèn)題 --><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;"><!-- 解決了內(nèi)容塌陷--><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é)
- 上一篇： 034_CSS绝对定位
- 下一篇： 029_CSS水平对齐