CSS基礎知識之float詳細介紹

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

浮動的基礎

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

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

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

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

浮動一個非替換元素，必須為該元素宣告一個width，否則元素的寬度趨於0。

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

浮動的深入研究

浮動元素的頂邊不可以高於包含區塊中先前產生的區塊級元素或行級元素的頂。

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

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

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

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

浮動的負作用

背景不能顯示

邊框不能撐開

margin padding 無法正確顯示

清除浮動的方法

/* 方法1，当父包含块缩成一条时无效 */

.clear-float2{ overflow:hidden; width:100%; }   
/* 方法2，overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容，从而实现了清除浮动。 */

.clear-float3{ overflow: auto; zoom: 1; }   
/* 方法3，zoom是在处理兼容性问题，hidden和auto都能清除浮动，据说auto对seo更友好 */

以上這篇CSS基礎知識之float詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

以上是CSS基礎知識之float詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！