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

標籤：style   blog   http   color   ar   使用   strong   sp   div   

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。  clearclear 屬性規定元素的哪一側不允許其他浮動元素。說明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就被迫下移一行。    那麼假如頁面中只有兩個元素div1、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時，如，沒有任何變化。

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