摘要：包裹性所謂包裹性，其實(shí)是由包裹和自適應(yīng)兩部分組成。官方對屬性的解釋是元素盒子的邊不能和前面的浮動(dòng)元素相鄰。清除高度塌陷的問題在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問題。

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

CSS世界中的float屬性是一個(gè)年代非常久遠(yuǎn)的屬性，設(shè)置了float屬性的元素會(huì)根據(jù)設(shè)置的屬性值向左或者向右浮動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂ＴO(shè)置了float屬性的元素會(huì)從普通文檔流中脫離，相當(dāng)于不占據(jù)任何空間，所以文檔中普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣，因此，設(shè)置float屬性的后會(huì)影響我們的頁面布局。具體說來就是：讓block元素?zé)o視float元素，讓inline元素像流水一樣圍繞著float元素實(shí)現(xiàn)浮動(dòng)布局。

float屬性設(shè)計(jì)的初衷：僅僅是讓文字像流水一樣環(huán)繞浮動(dòng)元素，就像下圖中展示的一樣：

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

包裹性

高度塌陷

塊狀化

沒有任何margin合并

下面將詳細(xì)闡述這幾點(diǎn)的含義。

所謂"包裹性"，其實(shí)是由"包裹"和"自適應(yīng)"兩部分組成。假設(shè)有以下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）包裹。本例中將浮動(dòng)元素父元素寬度設(shè)置為200px，浮動(dòng)元素的子元素是一個(gè)128px寬度的圖片，則此時(shí)浮動(dòng)元素寬度表現(xiàn)為"包裹"，也就是里面圖片的寬度128px。

/* HTML代碼 */

    

        
    

2）自適應(yīng)性。在浮動(dòng)子元素的中增加一些文字：

/* HTML代碼 */

    

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

此時(shí)，浮動(dòng)元素寬度就自適應(yīng)父元素的200px寬度，最終的寬度表現(xiàn)也是200px。如下圖所示：

float屬性有一個(gè)著名的特性：會(huì)讓父元素的高度塌陷。如章節(jié)2.1中的效果圖，父元素div的高度并沒有被子元素?fù)伍_(粉色區(qū)域)，這種效果可以稱為"高度塌陷"。float給div.son施了個(gè)障眼法，讓該元素的高度塌陷為0了，這樣外層div計(jì)算高度時(shí)，認(rèn)為div.son的高度為0，相當(dāng)于div.son的content的高度為0，則div.father認(rèn)為其沒有子元素，所以產(chǎn)生了高度塌陷。后文中將講述如何解決高度塌陷的問題。

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

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

在控制臺中的結(jié)果如下：

1.inline
2.block

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

因此，沒有任何理由出現(xiàn)下面的樣式組合：

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

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

/* HTML 代碼 */

    

        
    
    

        
    
    

        
    

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

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

文字環(huán)繞變身-中間內(nèi)容居中，左中右布局

直接看例子：

    左青龍
    右白虎
    
標(biāo)題

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

從下圖中看出，實(shí)現(xiàn)了中間內(nèi)容居中的左中右布局。

文字環(huán)繞的衍生-單側(cè)固定

    
    
美女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 {
    /* 環(huán)繞和自適應(yīng)的區(qū)別所在 */
    margin-left: 70px;
}

和文字環(huán)繞效果相比，區(qū)別就是.girl多了一個(gè)margin-left: 70px，同時(shí)圖片的寬度設(shè)置60px，因此不會(huì)發(fā)生文字環(huán)繞的效果。這里，我們也可以不使用margin-left，改用border-left或者padding-left都可以達(dá)到改變content box的尺寸，從而實(shí)現(xiàn)寬度自適應(yīng)布局效果。

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

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

clear: none | left | right | both

none：默認(rèn)值，允許兩邊都有浮動(dòng)對象；

left：不允許左側(cè)有浮動(dòng)對象；

right：不允許右側(cè)有浮動(dòng)對象；

both：兩側(cè)不允許有浮動(dòng)對象。

如果單從字面上的意思來理解，clear:left應(yīng)該是"清除左浮動(dòng)"，clear:right應(yīng)該是"清除右浮動(dòng)"，實(shí)際上，這種說法是有問題的，因?yàn)楦?dòng)一直還在，并沒有清除！只能清除浮動(dòng)帶來的影響。

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

/* 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元素為設(shè)置了左浮動(dòng)，已經(jīng)脫離了正常的文檔流，所以box2能夠在box1的底層顯示。如果想讓box2能夠換行排列，則只需要在.box2類中增加clear:left樣式即可。如下圖所示：

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

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

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

如果clear:both元素前面的元素就是float元素，則設(shè)置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;
}

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

clear:both后面的元素依舊可能會(huì)發(fā)生文字環(huán)繞現(xiàn)象。

    

        
    
    
美女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;
}

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

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

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

那么滿足什么條件才會(huì)有BFC呢？只要滿足下面任意一個(gè)條件就會(huì)觸發(fā)BFC:

html根元素；

float的值不為none；

overflow的值為auto、scroll或者h(yuǎn)idden；

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

position的值不為relative和static；

觸發(fā)BFC后，就不需要使用clear:both屬性去清除浮動(dòng)的影響。

清除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;
}

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

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

/* HTML代碼 */

    
item 1
    
item 2
    

        
item 3
    
    
item 4

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

清除高度塌陷的問題

在上面的章節(jié)中，如果子元素設(shè)置浮動(dòng)屬性，則父元素就會(huì)出現(xiàn)高度塌陷的問題。在這里，我們可以借助BFC消除高度塌陷的問題了，請看下面的這個(gè)例子：

/* HTML代碼 */

    

從下圖中可以看到，設(shè)置overflow:hidden樣式后就產(chǎn)生了BFC，根據(jù)BFC的表現(xiàn)規(guī)則，內(nèi)部元素的樣式不會(huì)影響外部元素的樣式，因此沒有出現(xiàn)高度塌陷的問題。

自適應(yīng)布局（阻止文本換行）

/* 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元素設(shè)置具有BFC特性的屬性，如：overflow: hidden就可以實(shí)現(xiàn)更健壯、更智能的自適應(yīng)布局。

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

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

自適應(yīng)內(nèi)容由于封閉而更加健壯，容錯(cuò)性更強(qiáng)；

自適應(yīng)內(nèi)容能夠填滿除浮動(dòng)元素以外區(qū)域，不需要關(guān)心浮動(dòng)元素寬度。

本文是我學(xué)習(xí)float屬性總結(jié)文章，可能存在理解準(zhǔn)確的地方，歡迎大家在評論區(qū)評論，指點(diǎn)迷津，大家互相幫助，互相進(jìn)步。

最后，希望本文的內(nèi)容能夠?qū)δ鷮loat的理解能夠有所幫助，感謝閱讀。

張鑫旭-《CSS世界》

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

?