明明白白講解CSS浮動屬性float的故事

float是什嗎？ 

     
float是CSS控制中的定位屬性。我們經常在傳統印刷產品中看到圖片被文本圍繞，這種方式一般被稱為“文本環繞”。在網頁設計中，應用了CSS的
float屬性的頁面元素就像在印刷布局裡面的被文字包圍的圖片一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對位置的頁面元素相比是一個明顯的不
同。絕對位置的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對位置的元素不會
影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。 

     舉例說明，我們在sidebar這個元素中設定了浮動屬性：

      #sidebar { float： right; }

      fload屬性有四個可用的值：Left 和Right 分別浮動元素到各自的方向，None （預設的）
使元素不浮動，Inherit 將會從父級元素擷取float值。

      Float的用處

      除了簡單的在圖片周圍包圍文字，我們在設計如下格式的布局時，就必須用到float屬性。

     
Float對box元素內部的布局同樣有用。例如這個小型圖文並排布局，如果我們在左側圖片上使用Float，當圖片大小發生變化的時候，box裡面
的文字內容也將自動調整位置：

     
同樣的布局如果我們在在外容器使用相對定位，然後在頭像上使用絕對位置來實現，那麼文本不會受頭像圖片大小的影響，不會隨頭像圖片的大小而有相應變化。

      清除Float

     
清除（clear）是浮動（float）的相關屬性。我們在浮動元素與非浮動元素之間應該聲明上面的浮動作用結束，這就需要用到clear。一個設定了清
除Float的元素不會如浮動所設定的一樣，向上移動到Float元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。

     
上例中，側欄向右浮動，並且短於主內容地區。頁尾（footer）於是按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁尾（footer）
上清除浮動，以使頁尾（footer）待在浮動元素的下面。

#footer { clear： both; }

      清除（clear）也有4個可選值。最常用的是 both，同時清除左右兩邊的浮動。left 和 right
分別只能清楚一個方向的浮動。none 是預設值，只在需要移除已指定的清除值時用到。inherit 應該是第五個值，不過很奇怪的是IE
不支援。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。

      偉大的塌陷

      使用浮動（float）屬性時我們需要注意的是帶有float屬性的元素是如何影響包含他們的父元素的。
     
注意：如果父元素只包含浮動元素，那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是一個很重要的問題。

      塌陷的直觀對立面更不好，如果我們為父元素指定了不合適的高度，就會出現下面的情況：

     
當上面的區塊層級元素自動擴充以適應浮動元素時，段落間的文字資料流中會出現非自然的空白換行，而且沒有有效方法來修正這個問題。對於這種情況，設計師的抱怨會
更甚於對塌陷的抱怨。

     
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題是必須要處理的。行之有效辦法就是我們在容器中的浮動元素之後，容器結束之前來清除浮動。

      清除浮動的技術

      如果你很明確的知道接下來的元素會是什麼，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要
hack，不添加額外的元素也使得它有良好的語義性。當然事情並不是都可以這樣解決的，我們還是需要準備各種不同的方法來實現清除浮動的目的。

      空div方法
，從字面來看，是一個空的 div。
      我們也可以嘗試用一些其他元素，但是 div 是最常用的，因為它沒有瀏覽器預設樣式；沒有特殊功能，而且一般不會被 css
樣式化。這個方法因為只是為了起到清除浮動的作用，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個確實有效又方
便，而且沒有任何副作用。

      overflow 方法
，在父元素上設定 overflow 這個 css
屬性。如果父元素的overflow 屬性設定為 auto 或者
hidden，父元素就會自動擴充以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。但是，如果需要增加一個新的 div
來使用這個方法，其實就和空 div 方法一樣沒有語義了。而且要記住，overflow
屬性不是為了清除浮動而存在的，它將有可能會引起副作用，要小心不要覆蓋住內容或者觸發了不需要的捲軸。

      簡單清除方法
，這裡使用了一個聰明的 css
偽選擇符（：after）來清除浮動。比起在父元素上設定 overflow，只需要給它增加一個額外的類似於”clearfix”的類。這個類使用如下
css：

.clearfix:after {
content：" ";
visibility： hidden;
display： block;
height： 0;
clear： both;
}

      這會在清除浮動的父元素之後應用一點看不見的內容。這不是全部內容，還需要一些額外的代碼來適應那些老舊的瀏覽器。

      不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網格為例。

     
為了從視覺上較好的把相似的塊聯絡起來，需要在必要的地方換行，這裡是顏色改變的地方。如果每個顏色組都有一個父元素的話，我們可以使用
overflow法 或者 簡單清除方法。或者，在每組之間用一個空div方法
。如果額外的父元素並不存在，可以自己
試試來看看哪個方法好。

      浮動的問題

      浮動因脆弱而飽受詬病。大多數的脆弱性來自於 IE6 及其一系列的浮動相關
bug。雖然越來越多的設計師表示出對IE6的憎惡並且宣稱不再為IE6單獨設定CSS，但是IE6.0仍然被大多數普通上網使用者使用，所以作為網頁設計
師我們還是不得不無奈的重視這些臭蟲，這裡有些大概。

     
推倒是浮動元素內的元素（大多是圖片）比浮動元素本身寬造成的現象。大多數的瀏覽器會在浮動之外渲染圖片，但是不會有伸出來的部分影響其他布局。IE
會擴充浮動來包含圖片，精彩大幅度地影響布局。一個普遍的例子是突破伸出主內容之外把側欄推到下面。

      快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來切除多餘的部分。

      雙倍邊距bug
，處理 IE6
時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設定外邊距（margin），會引發雙倍邊距bug。
      快速修正：給浮動設定 display:inline;
而且不用擔心，它依然是區塊層級元素。額外講一下，一個沒有賦予float屬性的區塊層級元素在設定了display:inline後，會變成內嵌元素，無法設定
自訂寬高。

      3像素間距
，是指挨著浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場
一樣。
      快速修正：在受影響的文本上設定寬度或高度。

     底邊距 bug
，IE7
中，當浮動父元素包含有浮動子項目時，這些子項目的底邊距會被父元素忽略掉，造成子項目底邊與父元素底邊重合的醜陋情形。
      快速修正：用父元素的底內補白（padding）代替。

      綜上所述，float是讓人歡喜讓人憂的這麼一個屬性，用好它，是我們必須要學會的事情。