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

andong777 發布于2019-08-29 10:57 / 1249人閱讀

摘要：父元素的頂端會限制浮動元素防止一直浮動到頁面頂端。例子戳這里清除浮動清除浮動的目的是為了解決高度塌陷的問題撐開浮動父元素。原理會在元素的之上增加一個清除區域這個區域會在元素的上增加額外間隔并且不允許浮動元素進入這個區域。

浮動概念

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

浮動影響 浮動元素會造成父元素塌陷

當給元素設置float之后,元素脫離文檔流,父元素沒有設置height,造成塌陷。


    


.super{
    border:1px solid blue;
}

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

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

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


    
    
 

.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的空標簽

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

原理: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 張鑫旭

GPU云服務器云服務器清除浮動 html浮動向上浮動上下浮動左右浮動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111327.html

深入清除浮動原理

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。關于浮動設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示：...

freewolf 2019-08-29 15:25 評論0 收藏0
css浮動、BFC、定位問題

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。產生折疊的必備條件必須是鄰接的而根據規范，兩個是鄰接的必須滿足以下條件必須是處于常規文檔流非和絕對定位的塊級盒子并且處于同一個當中。 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動元素，即是設置了浮動屬性的元素。其特征為： 1.浮動的框可以向左或者向右移動，直到它的外...

Tony 2019-08-29 12:53 評論0 收藏0
理解 BFC (Block Formatting Model)

摘要：是指塊級元素，就是會強制換行的元素，比如。將元素推向左側。請根據不同的實際情況，選擇最合適的方式。再次重申一下，是為子元素創建定位環境。，由于浮動元素占據了一定的寬度，新創建的會因此而變窄。這里只是為了更好地去理解而做一個例子。什么是 BFC W3C 為瀏覽器規定了三種定位模型：Normal Flow, 浮動, 和絕對定位。本文所介紹的 BFC (Block Formatting M...

Tonny 2019-08-28 18:18 評論0 收藏0
Bootstrap清除浮動的實現原理

摘要：當中包含屬性時，如果沒有包含空格，會造成清除浮動元素的頂部底部有一個空白設置也可以解決這個問題。這樣做，其一是為了和其他清除浮動的方式的效果保持一致其二，是為了與下設置后的效果一致即阻止合并的效果。 Boostrap清除浮動的css如下： .clearfix:before, .clearfix:after { content: ; display: table; } ...

劉德剛 2019-08-30 15:52 評論0 收藏0