CSS學習筆記-浮動（float，clear）

float

float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。若是浮動非替換元素，則要指定一個明確的寬度；不然，它們會盡量地窄。

註釋：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。

屬性值：

left    元素向左浮動。

right   元素向右浮動。

none    默認值。元素不浮動，並會顯示在其在文本中出現的位置。

inherit 規定應該從父元素繼承 float 屬性的值。

當同一排元素使用float：right時，左邊的元素會先浮動到右邊，以下圖：

                 　　   無浮動                                                    　　　　　　　　　　　　 float：right

當一個元素爲塊級元素，另一個元素浮動時，浮動元素依舊會換行：

當有兩個元素浮動，一個元素不浮動時。若不浮動的元素爲塊級元素，則會忽視浮動元素進行佈局，如圖：

若設置爲內聯元素，則該元素會在空白處環繞浮動元素，如圖：

如果IE瀏覽器 8以前的版本，不管是塊級元素仍是內聯元素都以下圖：

不會忽視浮動。

 

如有多個長度不等的浮動元素，且容器寬度不夠時：

第一行剩餘空間不足以知足黃色框的寬度，因而黃色框下移。頗有趣的是，黃色框並無在灰色之下，而是在玫紅色框之下，由於玫紅色框高度比灰色少。

 

綜上，當給元素設置浮動後，我的感受該元素相似於擁有了display：inline-block屬性。能夠像塊級元素同樣設置margin、width、height，又可使文本、內聯元素緊隨其後而不換行。

能夠參考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

 

浮動也可能致使容器元素高度塌陷（容器不設置height的狀況下）：

1.當容器內只有浮動元素，那麼容器會塌陷：

很奇怪，IE7不會塌陷：

而當我把width去掉以後又塌陷了：

2.若將div3的浮動去掉，則：

容器撐開了，塊級元素疊加（如上所說）。

3.若將div3改成display:inline

這是否是能說明：計算容器元素高度的時候，浮動元素至關於脫離了文檔流（但其實並未真正脫離，由於內聯元素還能環繞在其周圍）。固然，我這裏沒有測試IE6 7。

 

clear

clear 屬性規定元素的哪一側不容許其餘浮動元素。

說明

clear 屬性定義了元素的哪邊上不容許出現浮動元素。在 CSS1 和 CSS2 中，這是經過自動爲清除元素（即設置了 clear 屬性的元素）增長上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增長清除空間，而外邊距自己並不改變。不論哪種改變，最終結果都同樣，若是聲明爲左邊或右邊清除，會使元素的上外邊框邊界恰好在該邊上浮動元素的下外邊距邊界之下。

屬性值：

left 在左側不容許浮動元素。

right 在右側不容許浮動元素。

both 在左右兩側均不容許浮動元素。

none 默認值。容許浮動元素出如今兩側。

inherit 規定應該從父元素繼承 clear 屬性的值。

 

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

參考：http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 清除浮動部分

    怎麼理解呢？就拿下面的例子來講，咱們是想讓div2移動，但咱們倒是在div1元素的CSS樣式中使用了清除浮動，試圖經過清除div1右邊的浮動元素(clear:right;)來強迫div2下移，這是不可行的，由於這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。

    要想讓div2下移，就必須在div2的CSS樣式中使用浮動。本例中div2的左邊有浮動元素div1，所以只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不容許出現浮動元素，這樣div2就被迫下移一行。

    那麼假如頁面中只有兩個元素div一、div2，它們都是右浮動呢？讀者此時應該已經能本身推測場景，以下：

    此時若是要讓div2下移到div1下邊，要如何作呢？

 

    一樣根據小菜定論，咱們但願移動的是div2，就必須在div2的CSS樣式中調用浮動，由於浮動只能影響調用它的元素。

 

    能夠看出div2的右邊有一個浮動元素div1，那麼咱們能夠在div2的CSS樣式中使用clear:right;來指定div2的右邊不容許出現浮動元素，這樣div2就被迫下移一行，排到div1下邊。

以上是兩個物體同時浮動時使用clear屬性的效果。若div1浮動，div2不浮動，又會有什麼狀況發生呢？

默認狀況：

很奇怪，div2漂移上去被div1覆蓋了，可是其中的內容卻在div1的下面。。

使用clear:left或both後：

 

當div2設置display:inline時，默認狀況：

對div2使用clear：left或both時，如上圖，沒有任何變化。