摘要：包裹性所謂包裹性，其實是由包裹和自適應兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動元素相鄰。清除高度塌陷的問題在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。

float屬性是CSS中常用的一個屬性，在實際工作中使用的非常多，如果使用不當就會出現意料之外的效果。雖然很多人說浮動會用就行、浮動過時了，但是對于優秀的前端開發人員，需要有"刨根問底"的精神，這樣在出現一些問題的時候才不至于"手慌腳亂"！因此，今天就特別整理和總結一下float屬性。

CSS世界中的float屬性是一個年代非常久遠的屬性，設置了float屬性的元素會根據設置的屬性值向左或者向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。設置了float屬性的元素會從普通文檔流中脫離，相當于不占據任何空間，所以文檔中普通流中的元素表現的就像浮動元素不存在一樣，因此，設置float屬性的后會影響我們的頁面布局。具體說來就是：讓block元素無視float元素，讓inline元素像流水一樣圍繞著float元素實現浮動布局。

float屬性設計的初衷：僅僅是讓文字像流水一樣環繞浮動元素，就像下圖中展示的一樣：

float有哪些有意思的特性呢？具體如下：

包裹性

高度塌陷

塊狀化

沒有任何margin合并

下面將詳細闡述這幾點的含義。

所謂"包裹性"，其實是由"包裹"和"自適應"兩部分組成。假設有以下CSS代碼：

/* CSS代碼 */
.father{
    border: 1px solid deeppink;
    width: 200px;
}
.son {
    float: left;
    font-size: 0;
    border: 1px solid blue;
    padding: 5px;
}
.father img {
    width: 128px;
}

1）包裹。本例中將浮動元素父元素寬度設置為200px，浮動元素的子元素是一個128px寬度的圖片，則此時浮動元素寬度表現為"包裹"，也就是里面圖片的寬度128px。

/* HTML代碼 */

    

        
    

2）自適應性。在浮動子元素的中增加一些文字：

/* HTML代碼 */

    

        
        美女1，美女2，美女3，美女4，美女5，美女6，后宮1，后宮2，后宮3，后宮
    

此時，浮動元素寬度就自適應父元素的200px寬度，最終的寬度表現也是200px。如下圖所示：

float屬性有一個著名的特性：會讓父元素的高度塌陷。如章節2.1中的效果圖，父元素div的高度并沒有被子元素撐開(粉色區域)，這種效果可以稱為"高度塌陷"。float給div.son施了個障眼法，讓該元素的高度塌陷為0了，這樣外層div計算高度時，認為div.son的高度為0，相當于div.son的content的高度為0，則div.father認為其沒有子元素，所以產生了高度塌陷。后文中將講述如何解決高度塌陷的問題。

塊狀化的意思是，一旦元素float的屬性不為none，則其display計算值就是block或者table。舉個例子：

/* JavaScript代碼 */
var span = document.createElement("span")
document.body.appendChild(span)
console.log("1." + window.getComputedStyle(span).display)
// 設置元素左浮動
span.style.cssFloat = "left"
console.log("2." + window.getComputedStyle(span).display)

在控制臺中的結果如下：

1.inline
2.block

不知道大家有沒有跟我一樣的疑問：既然設置float后，元素就塊狀化了，那么怎么還能產生包裹性的效果呢？回答這個問題，需要重新闡述下塊狀化的意思，這里的塊狀化意思是可以像block元素一樣設置寬和高，并不是真正的塊元素。

因此，沒有任何理由出現下面的樣式組合：

span{
    display: block; /* 多余 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 多余 */
}

在這里，我們將.son類增加margin:10px樣式，在瀏覽器中查看實際效果。

/* HTML 代碼 */

    

        
    
    

        
    
    

        
    

我們增加.son類的margin為10px，在瀏覽器中查看相鄰的.son元素的空白區域的高度是20px，可以發現設置了float屬性的元素沒有任何的margin重疊，這和普通的元素margin重疊不一樣。

使用float可以通過破壞正常的文檔流實現CSS環繞，但是卻帶來了"高度塌陷"的問題！然而我們可以利用float破壞正常文檔流的特性實現一些常用的布局：

文字環繞變身-中間內容居中，左中右布局

直接看例子：

    左青龍
    右白虎
    
標題

.box{
    background-color: #f5f5f5;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.text-center{
    text-align: center;
}

從下圖中看出，實現了中間內容居中的左中右布局。

文字環繞的衍生-單側固定

    
    
美女1，美女2，美女3，美女4，美女5，美女6，后宮1，后宮2，后宮3，后宮4，后宮5，后宮6

.father{
    border: 1px solid #444;
    overflow: hidden;
}
.father > img {
    width: 60px; height: 64px;
    float: left;
}
.girl {
    /* 環繞和自適應的區別所在 */
    margin-left: 70px;
}

和文字環繞效果相比，區別就是.girl多了一個margin-left: 70px，同時圖片的寬度設置60px，因此不會發生文字環繞的效果。這里，我們也可以不使用margin-left，改用border-left或者padding-left都可以達到改變content box的尺寸，從而實現寬度自適應布局效果。

既然使用float屬性會帶來一系列的問題，那么有沒有辦法消除這些問題呢？答案是：肯定有。接著看下文。

在CSS中可以使用clear來清除float屬性帶來高度塌陷等問題，使用格式如下：

clear: none | left | right | both

none：默認值，允許兩邊都有浮動對象；

left：不允許左側有浮動對象；

right：不允許右側有浮動對象；

both：兩側不允許有浮動對象。

如果單從字面上的意思來理解，clear:left應該是"清除左浮動"，clear:right應該是"清除右浮動"，實際上，這種說法是有問題的，因為浮動一直還在，并沒有清除！只能清除浮動帶來的影響。

官方對clear屬性的解釋是："元素盒子的邊不能和前面的浮動元素相鄰"。注意這里的"前面的"3個字，也就是clear屬性對"后面的"浮動元素是不聞不問的。clear屬性只能清除元素的自身，不能影響其他的元素。接著看下面的這個例子：

/* HTML代碼 */

/* CSS代碼 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

如上圖所示，box1元素為設置了左浮動，已經脫離了正常的文檔流，所以box2能夠在box1的底層顯示。如果想讓box2能夠換行排列，則只需要在.box2類中增加clear:left樣式即可。如下圖所示：

clear屬性只對塊級元素有效，但是::after等偽元素默認都是內聯水平，因此，在實際工作中，我們常常使用下面的代碼來清除浮動帶來的影響：

.clear::after{
    content: "";
    display: table;/*也可以是"block"或者是"list-item"*/
    clear: both;
}

由于clear:both作用的本質是讓自己不和float元素在一行顯示，并不是真正意義上的清除浮動，因此float元素有一些不好的特性依然存在，表現在：

如果clear:both元素前面的元素就是float元素，則設置margin-top無效;

/* HTML代碼 */

/* CSS代碼 */
.box1 {
    float: left;
    width: 100px;
    height: 60px;
    padding: 10px;
    border: 3px solid black;
    background: url("../../lib/img/mm1.png") center no-repeat;
}
.box2 {
    clear: both;
    margin-top: -20px;
    border: 3px solid red;
    padding:10px;
    width:100px;
    height: 60px;
    background: url("../../lib/img/mm2.jpg") center no-repeat;
}

在本例中，設置.box2中的margin-top沒有任何的效果，如下圖所示：

clear:both后面的元素依舊可能會發生文字環繞現象。

    

        
    
    
美女1，美女2，美女3，美女4，美女5，美女6，后宮1，后宮2，后宮3，后宮

我要美女1，我還要美女2

/* CSS代碼 */
.father{
    border: 1px solid deeppink;
    width: 500px;
    height: 70px;
}
.father:after{
    content: "";
    display: table;
    clear: both;
}
.float{
    float: left;
}
.father img {
    width: 60px;
    height: 70px;
}

在本例中，設置clean:both來阻止浮動對后面元素的影響，但是最后的錯位效果依然發生了（可以設置.father的字體大小為0，然后設置p標簽的字體大小解決錯誤的問題）。

由此可見，clear:both只能在一定程度上消除浮動的影響，要想完美去除浮動元素的影響，借助其他的手段——BFC，接著看下文。

BFC全稱block formatting context，中文為"塊級格式化上下文"。BFC的表現原則為：如果一個元素具有BFC，那么它的內部子元素再怎么翻江倒海，都不會影響外部的元素。因此，BFC元素是不可能發生margin重疊的，另外，BFC元素也可以用來清除浮動的影響。

那么滿足什么條件才會有BFC呢？只要滿足下面任意一個條件就會觸發BFC:

html根元素；

float的值不為none；

overflow的值為auto、scroll或者hidden；

display的值為table-cell、table-caption和inline-block中的任何一個；

position的值不為relative和static；

觸發BFC后，就不需要使用clear:both屬性去清除浮動的影響。

清除margin重疊

/* HTML 代碼 */

    
item 1
    
item 2
    
item 3
    
item 4

/* CSS 代碼 */
.parent{
    width: 300px;
    background-color: black;
    overflow: hidden;
}
p {
    background-color: white;
    margin: 10px 0;
    text-align: center;
}

在這種情況下，出現了margin重疊的效果。如下圖所示：

利用BFC能消除margin重疊，謹記：只有當元素在同一個BFC中時，垂直方向上的margin才會clollpase。如果它們屬于不同的BFC，則不會有margin重疊。因此我們可以再建立一個BFC去阻止margin重疊的發生。所以為了讓他們的margin變成20px，我們只需要用div,建立一個BFC，令p元素處于不同BFC即可。請看例子：

/* HTML代碼 */

    
item 1
    
item 2
    

        
item 3
    
    
item 4

從下圖中可以看出，借助BFC消除了margin重疊的問題。

清除高度塌陷的問題

在上面的章節中，如果子元素設置浮動屬性，則父元素就會出現高度塌陷的問題。在這里，我們可以借助BFC消除高度塌陷的問題了，請看下面的這個例子：

/* HTML代碼 */

    

從下圖中可以看到，設置overflow:hidden樣式后就產生了BFC，根據BFC的表現規則，內部元素的樣式不會影響外部元素的樣式，因此沒有出現高度塌陷的問題。

自適應布局（阻止文本換行）

/* HTML代碼 */

    
    
美女1,美女2,美女3,美女4,美女5,美女6,后宮1,后宮2,后宮3,后宮4,

/* CSS代碼 */
.parent{
    border: 1px solid deeppink;
    width: 200px;
    font-size: 0;
}
.parent img{
    border: 1px solid blue;
    float: left;
}
.girl{
    /*overflow: hidden;*/
    font-size: 12px;
    background-color: #cdcdcd;
}

如果我們給.girl元素設置具有BFC特性的屬性，如：overflow: hidden就可以實現更健壯、更智能的自適應布局。

這里的.girl元素為了不和浮動元素產生任何交集，順著浮動邊緣形成自己的封閉上下文。

普通元素在設置了overflow:hidden后，會自動填滿容器中除了浮動元素意外的剩余空間，形成自適應效果，這種自適應布局和純流體布局相比：

自適應內容由于封閉而更加健壯，容錯性更強；

自適應內容能夠填滿除浮動元素以外區域，不需要關心浮動元素寬度。

本文是我學習float屬性總結文章，可能存在理解準確的地方，歡迎大家在評論區評論，指點迷津，大家互相幫助，互相進步。

最后，希望本文的內容能夠對您對float的理解能夠有所幫助，感謝閱讀。

張鑫旭-《CSS世界》

遇見了，不妨關注下我的微信公眾號「前端Talkking」

?