Float（浮動）概念也許是CSS中最讓人迷惑的一個概念吧。Float經常被錯誤理解，而且因為將上下文元素全部浮動導致的可讀性、可用性問題備受責難。然而，這些問題的根源并不在于理論本身，而是開發人員以及瀏覽器對理論的解讀造成的。 如果你認真的去讀一下浮動概念，你會發現并不像所見的那樣復雜。大多數問題都是由于老版本的IE帶來的（我只是猜想）。如果你知道這些bug，你就能避免這些問題。 讓我們嘗試去解決這些問題并澄清一些以前使用浮動的誤解。我們參考了成打的相關文章，并選取了最為重要的一些你必須了解的問題。 What You Should Know About Floats “關于圖文圍繞的實踐可以追溯到很久很久以前。這也就是為什么從Netscape1.1開始這個功能被引入瀏覽器，以及為什么CSS使用浮動屬性來實現它。‘Float(浮動)’這個術語引用自伴隨Netscape1.1一同發布的‘Additions to HTML 2.0’文檔，描述一個元素浮動至某一側并停下的表現方式。” “浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出后，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。” “元素浮動后將自動轉為塊級元素。該元素可以被移動至當前行的左側或右側。屬性如下：float: left, float: right or float: none” “你應該為所有的浮動元素設定寬度屬性（除非是＜img＞元素，因其具有隱含的寬度）。如果不設定寬度，結果將是不可預知的。” “舉例來說，浮動元素應該定義寬度屬性，不論是顯式指定的還是隱含的。另外，它會盡可能的水平的填充容器元素，就像非浮動內容那樣，不給其他內容空間以圍繞它們。其次，和正常文檔流中的元素不同，浮動元素的垂直邊距(margin)不會疊加。最后，浮動元素可以和臨近在正常文檔流中塊級元素重疊（譯注：浮動元素不占任何正常文檔流空間，所以建議不要理解成重疊，而是騰空浮動的概念。）。” “首先我們要牢記的一件事情是，浮動元素只能浮動至左側或者右側，沒有浮動至中間一說，這是很多新手容易范的錯誤。記住，最基本的規則，浮動元素只能浮動至兩側。” “當我們讓一個元素浮動，它會往右或者往左浮動直至遇到容器的邊緣。如果我們向同一方向再浮動一個元素，它會浮動直至碰到前一個浮動元素的邊緣。如果我們浮動更多的元素，他們將一個挨一個排列，但不久就會空間不足，當該行已經無法容納更多的浮動元素，則下一個浮動元素會換行繼續排列。”
