CSS學習筆記08 浮動
從CSS學習筆記05 display屬性一文中，我們知道div是塊元素，會獨占一行，即使div的寬度很小，像下面這樣
應用display屬性的inline屬性可以讓div與div共享一行，除了這種方法外，還有沒有其他方法可以實現這種效果呢，答案是肯定的，那就是下面要介紹的CSS的浮動特性，浮動從字面意思上來看，就是浮起來，動起來，那麽是誰浮起來，又是誰動起來呢？往下看，很快就會知道答案了。
元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，漂浮在標準流之上。元素浮動後，雖然脫離標準流，但還是會影響標準流的布局。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：選擇器{float:屬性值;}，默認值為none（不浮動），另外用left表示左浮動，可以理解為漂浮起來後靠左排列，right表示右浮動，自然的就是靠右排列。
現在我們給div2設置浮動，看看會出現什麽效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮動</title> 6 <style type="text/css"> 7 .div1 {background-color: red; height: 50px; width: 400px;} 8 .div2 {background-color: blue; height: 100px; width: 100px; float: left;} 9 .div3 {background-color: gray; height: 150px; width: 400px;} 10 .div4 {background-color: green; height: 30px; width: 600px;} 11 </style> 12 </head> 13 <body> 14 <div class="div1">div1</div> 15 <div class="div2">div2</div> 16 <div class="div3">這是div3這是div3這是div3這是div3這是div3這是div3這是div3這是div3這是div3這是div3這是div3這是div3</div> 17 <div class="div4">div4</div> 18 </body> 19 </html>
這時候div2的位置並沒有變化，而div3向上移動了，與div2共用一行，相當於div2不占用頁面的空間了，不過影響了div3中的文字布局。從這裏也可以清楚的看出，是浮動的對象div2先漂浮起來，然後後面的對象div3會向它原來的位置動起來，這也解答了剛開始提出的問題。
浮動是將塊元素獨占一行的行為取消，將這個塊從原來的文檔流模式中，可以理解為它飄起來了，它原來的地方就空出來了，它的內容分離出來，這樣它後面的對象就當它不存在了。
接下來給div3也設置一下浮動，會有什麽意想不到的結果出現嗎？
這時，由於div2與div3同時設置了浮動，所以都脫離了標準流，因此div4向上移動與div1組成了一個新的標準流，而浮動的元素是“浮”在標準流的元素之上的，所以div4被div2，div3擋住了一部分。
從上面的現象可以看出，給div3設置浮動之後，div3是緊接著跟在div2後面的，但是div2也是設置了浮動的，可是div2並沒有跟在div1後面，這裏可以得出一個結論：
浮動的元素A排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊（也就是緊挨著上一個元素的後面），如果一行放不下，A元素則會被擠到下一行；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
假如把div4也設置成左浮動，效果如下
我們來一起分析一下，首先看div4，它的上一個元素div3設置了左浮動，所以div4的頂部與div3的頂部對齊，接著看div3，div3的上一個元素div2也設置了左浮動，所以div3的頂部與div2的頂部對其，現在看div2，div2的上一個元素是div1，但是div1並沒有設置浮動屬性，屬於標準流，所以div2的頂部與div1的底部對齊。
或許有人會想如果要讓div4獨占一行，該怎麽辦？這就需要用到CSS的清除浮動，清除浮動的關鍵字是clear，它有如下幾個值
再來看div2設置左浮動的現象
因為div3的上一個元素div2設置了左浮動，所以div3占據了元素div2的空間，因為div3的寬高比div2的寬高都大，所以div3被div2擋住了一部分，我們知道標準流中的元素都是沒有設置浮動屬性的，所以需要清除掉div2元素浮動給div3造成的影響，由於div2是左浮動，因此為div3清除左邊的浮動
現象與原來沒有設置浮動一樣，好，現在div2與div3同時設置左浮動，我想應該可以比較容易的知道如何讓div4獨占一行了。
清除浮動其他屬性值可以自行類推並測試出來。有了上面的基礎，我們就可以做出以下比較常見的網頁布局。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>常見布局</title> 6 <style type="text/css"> 7 .head {background-color: red; height: 50px; width: 500px;} 8 .sidebar {background-color: blue; height: 200px; width: 100px; float: left;} 9 .main {background-color: gray; height: 200px; width: 400px; float: left;} 10 .foot {background-color: green; height: 30px; width: 500px; clear: left;} 11 </style> 12 </head> 13 <body> 14 <div class="head">head</div> 15 <div class="sidebar">sidebar</div> 16 <div class="main">main</div> 17 <div class="foot">foot</div> 18 </body> 19 </html>View Code
CSS學習筆記08 浮動