浮動(Floats)原理與清除浮動

浮動概念

浮動元素會脫離文檔的普通流,根據float的值向左或向右移動,直到它的外邊界碰到父元素的內邊界或另外一個浮動元素的外邊界爲止。因爲浮動框不在文檔的普通流中,因此文檔的普通流中的塊級元素表現得就像浮動元素不存在同樣。

浮動影響

浮動元素會形成父元素塌陷

當給元素設置float以後,元素脫離文檔流,父元素沒有設置height,形成塌陷。

<div class="super">
    <div class="sub"></div>
</div>

.super{
    border:1px solid blue;
}

.sub{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

浮動元素的左(右)外邊界不能超出其父元素的左(右)內邊界。

在不設置margin爲負值和父元素還有剩餘空間的狀況下,浮動元素的外邊界(margin)不會超出父元素的內邊界(padding)。

<div class="super">
    <div class="sub1"></div>
    <div class="sub2"></div>
</div> 

.super{
    margin: 0 auto;
    padding: 10px;
    border:1px solid blue;
     width: 300px;
}

.super:after{
  clear: both;
  content: '';
  display: block;
}

.sub1{
  float: left;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.sub2{
  float: right;
  background: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

浮動元素不會重疊。

這個也是在margin不會爲負值和父元素還有剩餘空間的條件下適用的。
這個是我對《CSS權威指南》中浮動這一章節中規則二和規則三的理解,如下是原文。

2.The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left-floating (or right-floating) element that occurs earlier in the document’s source, unless the top of the later element is below the bottom of the former.

3.The right outer edge of a left-floating element may not be to the right of the left outer edge of any right-floating element to its right. The left outer edge of a right- floating element may not be to the left of the right outer edge of any left-floating element to its left.

這兩個規則是保證兩個浮動元素不重疊的基礎。

表現爲當一個浮動元素往左(右)靠的時候,在這個元素左(右)邊已經存在一個浮動元素,他們不會重疊,後來者緊挨着先來者排列。若是浮動元素們的總寬度已經超過父元素的寬度,浮動元素之間也不會重疊,依照HTML結構的順序,從在一行排列不下的浮動元素開始會移動到下一行。

例子戳這裏!

浮動元素的頂端不能比其父元素的內頂端更高,不能比以前出現的浮動元素頂端高。

這個規則也是在margin-top不爲負值的狀況下成立。

父元素的頂端會限制浮動元素,防止一直浮動到頁面頂端。
對於下圖右邊的例子,sub2在sub1下面,sub1右邊的空間已經不足以容納sub2,可是足夠容納sub3,而sub3沒有上浮,那是由於他的的頂端就不能超過sub2的頂端,這個例子足以印證浮動元素的頂端不能比以前出現的浮動元素頂端高。

例子戳這裏!

清除浮動

清除浮動的目的是爲了解決高度塌陷的問題,撐開浮動父元素。經常使用的通常有幾種方法:

增長一個樣式爲clear:both的空標籤

<div style="clear:both;"></div>

把上面這句標籤放到浮動元素的父元素的最後。

原理:clear會在元素的margin-top之上增長一個清除區域(clearance),這個區域會在元素的margin-top上增長額外間隔,而且不容許浮動元素進入這個區域。

• 優勢:方便,兼容性強。

• 缺點:多出許多無心義的標籤,增長維護成本,並且稍不注意中間多了個空格會產生一段空白高度。

父元素設置浮動

優勢:簡單,代碼少,瀏覽器支持好。
缺點:父級使用浮動以後,浮動形成的影響仍舊存在,而且不可能父級往上一級級都使用浮動。

使用overflow、zoom屬性

.fix{
    overflow:hidden(auto、scroll); 
    zoom:1;
}

• 優勢:代碼簡潔,兼容性好,不產生多餘標籤。

• 缺點:設置該fix類的標籤的內容超出該標籤的時候會被隱藏(或產生滾動條)。

父元素設置浮動

優勢:簡單,代碼少,瀏覽器支持好。
缺點:父級使用浮動以後,浮動形成的影響仍舊存在,而且不可能父級往上一級級都使用浮動。

父元素設置position

原理:在position的值不爲relative或static的狀況下,會造成BFC。

這種方式在父元素本來就須要設置position爲fixed或者absolute的時候能夠優先採用。

優勢:簡單,代碼少,瀏覽器支持好。
缺點:改變父元素佈局,影響總體佈局。

使用：after

.fix:after{
    display:block; 
    content:''; 
    clear:both; 
}

原理相似添加新的標籤而後設置clear:both;,但使用僞類的方法沒有多餘標籤。

• 優勢:代碼簡潔,兼容性好,不產生多餘標籤。

以上方法中,第一種增長一個樣式爲clear:both的空標籤的方法不建議使用,會增長無心義標籤,其餘設置父元素浮動,改變父元素position、overflow的方法依狀況而定,若是父元素自己就有這方面的樣式需求,那很合適,若是沒有的話仍是採用最後一種僞元素的:after的方式最爲常見。

總結

關於浮動的學問還有更可深刻的空間,這篇博客也只是對本身學習的成果起到梳理做用,對於浮動在各場景產生的影響,須要大量的實踐去累積去體會,才能深入掌握float,在往後有新的認識的時候會再回來更新,若有不一樣看法也歡迎你們前來指正。

參考

• 《CSS權威指南》

• CSS float浮動的深刻研究、詳解及拓展(一) by 張鑫旭

• CSS float浮動的深刻研究、詳解及拓展(二) by 張鑫旭