標籤：float clear 清除浮動 浮動原理
浮動原理及清除浮動
上節回顧
在上節的《Web前端入門學習（4）—— 區塊層級元素和行內元素之特徵與轉換》中(http://cherry360.blog.51cto.com/12176744/1863945)，介紹了區塊層級元素和行內元素的特徵，及粗略介紹了如何進行轉換。加上display屬性，可以指定元素的類型，如display:block、display:inline，以及display:inline-block。當然用得最多的是最後一個display:inline-block。結合例子來看：
例1：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>無標題文檔</title><style> div,span{height:100px;width:100px;background:blue;border:1px solid red;}</style></head><body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span></body></html>
顯示結果：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/89/28/wKiom1gJhJuzAw-aAAALuMxgnms386.png-wh_500x0-wm_3-wmp_4-s_1558131286.png" title="c.png" alt="wKiom1gJhJuzAw-aAAALuMxgnms386.png-wh_50" />
例2，如果在css樣式中加上display:inline-block,即把CSS樣式改成：
div,span{ height:100px; width:100px; background:blue; border:1px solid red; display:inline-block;}
顯示效果將會變成：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/89/25/wKioL1gJhCah6AV3AAAG2KbBSVk001.png-wh_500x0-wm_3-wmp_4-s_3881240686.png" title="b.png" alt="wKioL1gJhCah6AV3AAAG2KbBSVk001.png-wh_50" />
650) this.width=650;" src="http://img.baidu.com/hi/babycat/C_0020.gif" alt="C_0020.gif" />從上面的對比結果可以看出，屬性display:inline-block的效果是，可以把區塊層級元素在同一行內顯示，而行內元素也變得支援寬高。但是使用這種方式，也有一些隱患問題，就是換行被解析。也就是說，標籤之間換行之後，顯示出來的效果中間是存在間隙的，並且不同瀏覽器之間的間隙大小不一致。此外，IE6、IE7是不支援區塊層級元素的inline-block效果。那麼有其他辦法可以解決嗎？這就是本節需要討論的問題了。
浮動原理
任何元素都可以被浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框位置；由於浮動框不在文檔流中，所以文檔流中的元素會表現得就像浮動框不存在一樣。文檔流是文檔中可顯示對象在排列時所佔用的位置。話不多說，看例子最直觀：
例3：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>無標題文檔</title><style> div,span{height:100px;width:100px;background:blue;border:1px solid red;float:left;}</style></head><body> <div class="div1">div1</div> <div class="div2">div2</div> <span class="span1">span1</span> <span class="span2">span2</span></body></html>
顯示結果：
650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/89/27/wKioL1gJsyuRuFeNAAAQj4FwoQU201.png-wh_500x0-wm_3-wmp_4-s_1544538579.png" title="f.png" alt="wKioL1gJsyuRuFeNAAAQj4FwoQU201.png-wh_50" />
650) this.width=650;" src="http://img.baidu.com/hi/babycat/C_0020.gif" alt="C_0020.gif" />本例的結果和例2的結果，代碼區別在於把display:inline-block改成float:left，而顯示結果的區別是標籤換行沒有被解析。還有一些特點現在通過肉眼還無法看出來，就是使用float屬性的元素會脫離文檔流，現在看看下面例子：
例4：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>無標題文檔</title><style> .box1{width:100px;height:100px;background:red;float:left;} .box2{width:200px;height:200px;background:blue;}</style></head><body> <div class="box1"></div> <div class="box2"></div></body></html>
顯示結果：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M01/89/27/wKioL1gJtWaiLNzuAAAGtxCRKG4188.png-wh_500x0-wm_3-wmp_4-s_95572139.png" title="g.png" alt="wKioL1gJtWaiLNzuAAAGtxCRKG4188.png-wh_50" />
650) this.width=650;" src="http://img.baidu.com/hi/babycat/C_0020.gif" alt="C_0020.gif" />從例4可以看出，紅色塊盒子使用了left浮動，而藍色塊盒子沒有使用浮動元素，因此紅色塊脫離了文檔流，而藍色塊盒子好像看不到紅色塊盒子一樣，重疊在一起了。
綜上所得，總結出浮動元素的幾個特徵：
內嵌元素支援寬高；
塊元素可以在同行顯示；
寬度由內容撐開；
脫離文檔流；
提升層級半層。
瞭解了浮動原理之後，我們知道使用float屬性的元素會脫離文檔流，那麼其他沒有使用浮動屬性的元素會看不到它們，從而導致出現重疊這種狀況，如何解決呢？那麼現在就引入一個清除浮動的知識點了。
例5：
在例4的代碼中，把box2的樣式改成：
.box2{ width:200px;height:200px;background:blue;clear:left;}
顯示結果：
650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/89/2A/wKiom1gJue6w08eNAAAINO9Icg0451.png-wh_500x0-wm_3-wmp_4-s_2116165435.png" title="h.png" alt="wKiom1gJue6w08eNAAAINO9Icg0451.png-wh_50" />
屬性clear把紅色塊盒子的左浮動清除了，所以藍色塊盒子不再和紅色盒子重疊在一起。這裡僅是簡單介紹清除浮動的辦法之一，當然還有很多辦法，在此僅作入門瞭解。
溫馨提示650) this.width=650;" src="http://img.baidu.com/hi/jx2/j_0057.gif" alt="j_0057.gif" style="padding:0px;margin:0px;vertical-align:top;border:none;" />：
float浮動屬性值：left/right/none；
clear清除浮動屬性值：left/right/both/none。
本文出自 “小倩加油站” 部落格，請務必保留此出處http://cherry360.blog.51cto.com/12176744/1864258
Web前端入門學習（5）——浮動原理及清除浮動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
