CSS學習筆記08 浮動

時間 2019-12-09

標籤 css 學習筆記浮動欄目 CSS 简体版

原文原文鏈接

從CSS學習筆記05 display屬性一文中，咱們知道div是塊元素，會獨佔一行，即便div的寬度很小，像下面這樣css

應用display屬性的inline屬性可讓div與div共享一行，除了這種方法外，還有沒有其餘方法能夠實現這種效果呢，答案是確定的，那就是下面要介紹的CSS的浮動特性，浮動從字面意思上來看，就是浮起來，動起來，那麼是誰浮起來，又是誰動起來呢？往下看，很快就會知道答案了。html

元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，漂浮在標準流之上。元素浮動後，雖然脫離標準流，但仍是會影響標準流的佈局。瀏覽器

在CSS中，經過float屬性來定義浮動，其基本語法格式以下：選擇器{float:屬性值;}，默認值爲none（不浮動），另外用left表示左浮動，能夠理解爲漂浮起來後靠左排列，right表示右浮動，天然的就是靠右排列。ide

如今咱們給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也設置一下浮動，會有什麼意想不到的結果出現嗎？spa

這時，因爲div2與div3同時設置了浮動，因此都脫離了標準流，所以div4向上移動與div1組成了一個新的標準流，而浮動的元素是「浮」在標準流的元素之上的，因此div4被div2，div3擋住了一部分。code

從上面的現象能夠看出，給div3設置浮動以後，div3是緊接着跟在div2後面的，可是div2也是設置了浮動的，但是div2並無跟在div1後面，這裏能夠得出一個結論：htm

浮動的元素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

清除浮動的幾種方法

說到浮動，就有必要說下清除浮動，在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

看現象，正常狀況下咱們但願div的排列方式像下面這樣

實際上極可能是這樣，父容器的高度變爲了0，也是常說的高度坍塌

下面介紹幾種經常使用的解決方法

一、添加額外標籤

這種方法是經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」>，該方法容易理解，容易掌握，可是會在頁面中添加不少沒有意義的空標籤，建議不要使用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style type="text/css">
 7         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}
 8         .parent {width: 350px; border: 3px solid #95E1D3;}
 9         .clear {clear: both;}
10     </style>
11 </head>
12 <body>
13     <div class="parent">
14         <div class="child"></div>
15         <div class="child"></div>
16         <div class="clear"></div>
17     </div>
18 </body>
19 </html>

能夠將16行代碼註釋掉而後對比下效果。

二、父元素設置 overflow：hidden

這個方法主要用到BFC的特性，下一篇會講到，根據BFC特性，也能夠設置爲 overflow：auto

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style type="text/css">
 7         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}
 8         .parent {width: 350px; border: 3px solid #95E1D3; overflow: hidden;}
 9     </style>
10 </head>
11 <body>
12     <div class="parent">
13         <div class="child"></div>
14         <div class="child"></div>
15     </div>
16 </body>
17 </html>

三、使用:after 僞元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>清除浮動</title>
 6     <style type="text/css">
 7         .child {background-color: #95E1D3; border: 3px solid #FCE38A; margin: 5px; width: 100px; height: 100px; float: left;}
 8         .parent {width: 350px; border: 3px solid #95E1D3;}
 9         .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
10         .clearfix{zoom:1} // 爲了兼容IE，觸發hasLayout
11     </style>
12 </head>
13 <body>
14     <div class="parent clearfix">
15         <div class="child"></div>
16         <div class="child"></div>
17     </div>
18 </body>
19 </html>