CSS基礎知識之float

前段時間寫過一篇CSS基礎知識之position，當時對float的理解不太準確，被慕課網多名讀者指出（原文已修正，若有誤導實在抱歉）。現對float進行更深刻的學習，在此把學習心得分享給你們。

浮動的基礎知識

• 浮動有4個屬性：left（左浮動）、right（右浮動）、none（不浮動）、inherit（繼承）。

• 浮動元素的包含塊是其最近的塊級祖先元素。
  

• 浮動元素會左偏移（或右偏移），直到它的外邊界接觸到『包含塊的內邊界』或『另外一個浮動元素的外邊界』。
  

• 浮動元素脫離了標準文檔流，文字和行級元素會環繞該元素，塊級元素則不受影響。
  

• 浮動一個非替換元素，必須爲該元素聲明一個width，不然元素的寬度趨於0。
  

• 浮動元素的margin（外邊距）不會與其餘元素的margin合併。
  

浮動的深刻研究

• 浮動元素的頂邊不能夠高於包含塊中先前產生的塊級元素或行級元素的頂。

• 浮動元素之間不可重疊，若是水平方向沒有足夠的空間放置浮動元素，它將向下移動，直到有足夠的空間或沒有更多的浮動元素爲止。

• 浮動元素不能溢出包含塊的左、右、上邊界，僅可溢出下邊界。（浮動元素溢出下邊界時，部分瀏覽器會增長包含塊的高度，使浮動元素可以包含在包含塊中，出現大片空白，致使瀏覽器兼容性問題。）

• 浮動元素設置負外邊距時，雖然浮動元素看起來溢出了包含塊，但實際並無違反上述規則。

• 特殊狀況，浮動元素比包含塊更寬時，浮動元素會在偏移的反方向溢出。

浮動的負做用

• 背景不能顯示

• 邊框不能撐開

• margin padding 不能正確顯示

清除浮動的方法

.clear-float1{ content: 「」; display: block; clear: both; }
/* 方法1，當父包含塊縮成一條時無效 */

.clear-float2{ overflow:hidden; width:100%; }
/* 方法2，overflow:hidden屬性至關因而讓父級緊貼內容，這樣便可緊貼其對象內內容，從而實現了清除浮動。 */

.clear-float3{ overflow: auto; zoom: 1; }
/* 方法3，zoom是在處理兼容性問題，hidden和auto都能清除浮動，聽說auto對seo更友好 */

擴展閱讀

• 《CSS權威指南》——第10章 浮動和定位

• CSS基礎知識之position，瞭解塊級元素和行級元素，及定位基礎知識

• 非替換元素和替換元素

• KB011: 浮動( Floats )

• KB008: 包含塊( Containing block )

• css清除浮動float的三種方法總結

歡迎來到 石佳劼的博客，若有疑問，請在「原文」評論區 留言，我會盡可能爲您解答。

---