035_CSS浮动
1. 浮動的框可以向左或向右移動, 直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
2. 由于浮動框不在文檔的普通流中, 所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
3. float屬性
3.1. 定義和用法
3.1.1. float屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像, 使文本圍繞在圖像周圍, 不過在CSS中, 任何元素都可以浮動。浮動元素會生成一個塊級框, 而不論它本身是何種元素。
3.1.2. 假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
3.2. 默認值
3.3. 可能的值
4. CSS浮動
4.1. 請看下圖, 當把框1向右浮動時, 它脫離文檔流并且向右移動, 直到它的右邊緣碰到包含框的右邊緣:
4.1.1. 代碼
<!DOCTYPE html> <html style="background: black;"><head><title>框1右浮動</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. 再請看下圖, 當框1向左浮動時, 它脫離文檔流并且向左移動, 直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中, 所以它不占據空間, 實際上覆蓋住了框2, 使框2從視圖中消失。
4.2.1. 代碼
<!DOCTYPE html> <html style="background: black;"><head><title>框1左浮動</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. 如果把所有三個框都向左移動, 那么框1向左浮動直到碰到包含框, 另外兩個框向左浮動直到碰到前一個浮動框。
4.3.1. 代碼
<!DOCTYPE html> <html style="background: black;"><head><title>框123左浮動</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. 如下圖所示, 如果包含框太窄, 無法容納水平排列的三個浮動元素, 那么其它浮動塊向下移動, 直到有足夠的空間。如果浮動元素的高度不同, 那么當它們向下移動時可能被其它浮動元素"卡住":
4.4.1. 代碼
<!DOCTYPE html> <html style="background: black;"><head><title>框123左浮動卡住</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. 浮動框旁邊的行框被縮短, 從而給浮動框留出空間, 行框圍繞浮動框。因此, 創建浮動框可以使文本圍繞圖像:
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. 浮動框旁邊的行框被縮短, 從而給浮動框留出空間, 行框圍繞浮動框。5.2. 因此, 創建浮動框可以使文本圍繞圖像:</p><p style="background: green;">5.1. 浮動框旁邊的行框被縮短, 從而給浮動框留出空間, 行框圍繞浮動框。5.2. 因此, 創建浮動框可以使文本圍繞圖像:5.3. 要想阻止行框圍繞浮動框, 需要對該框應用clear屬性。clear屬性的值可以是left、right、both或none, 它表示框的哪些邊不應該挨著浮動框。</p></body> </html>5.1.2. 效果圖
5.2. clear屬性
5.2.1. clear屬性規定元素的哪一側不允許其他浮動元素。
5.2.2. 在 CSS1和CSS2中, 這是通過自動為清除元素(即設置了clear屬性的元素)增加上外邊距實現的。在CSS2.1 中, 會在元素上外邊距之上增加清除空間, 而外邊距本身并不改變。
5.2.3. 默認值
5.2.4. 可能的值
5.3. 為了實現這種效果, 在被清理的元素的上外邊距上添加足夠的空間, 使元素的頂邊緣垂直下降到浮動框下面:
5.3.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. 浮動框旁邊的行框被縮短, 從而給浮動框留出空間, 行框圍繞浮動框。5.2. 因此, 創建浮動框可以使文本圍繞圖像:</p><p style="background: green; clear: left;">5.1. 浮動框旁邊的行框被縮短, 從而給浮動框留出空間, 行框圍繞浮動框。5.2. 因此, 創建浮動框可以使文本圍繞圖像:5.3. 要想阻止行框圍繞浮動框, 需要對該框應用clear屬性。clear屬性的值可以是left、right、both或none, 它表示框的哪些邊不應該挨著浮動框。</p></body> </html>5.3.2. 效果圖
總結
- 上一篇： 034_CSS绝对定位
- 下一篇： 029_CSS水平对齐