本章繼續來探討CSS世界的流破壞和流保護，延續的是上一章float的內容，在上一章中我們已經知道了clear屬性并不是真正的清除浮動，本章將繼續深入探索，引入BFC結界的概念。如果對浮動和清浮動屬性還不太了解的同學強烈推薦先觀看上一章的內容——那些年騙過你的float和“清浮動”。下面正式開始本章的內容。

1.CSS的結界——BFC

BFC是block formatting context的縮寫，中文名為“塊級格式化上下文”。前面也多次提到了這個聽起來十分拗口的屬性，那么CSS設計這個屬性的初衷是什么呢？

記住一句話：擁有BFC特性的元素會形成類似“結界”的封閉內部空間，該元素內部的元素以及該元素本身都不會影響外部元素的表現。要理解這句話，還得通過一些例子來證明，在舉例證明之前，我們必須得知道一件事，就是CSS規定了哪些屬性可以生成BFC屬性，常見的情況如下：

• float不為none的元素。
• overflow的值為auto，scroll或hidden。
• display的值為inline-block，table-cell或table-caption。
• position的值不為relative和static

在知道了哪些元素擁有BFC屬性后，我們就可以愉快的測試了。

由于一個元素擁有BFC，因此其內部子元素再怎么變都不能影響到外面的元素，這句話仿佛在哪里見過？沒錯，讀過上一章的小伙伴應該還記得float元素導致父容器高度坍塌的問題，因此如果float元素的父容器擁有BFC特性會發生什么呢？實踐出真知，試一試不就知道了嗎。

<!-- BFC --> <div style="display: inline-block;"><div style="float: left;">我的父元素有BFC,我是左浮動</div><div style="float: right;">我的父元素有BFC,我是右浮動</div> </div> 復制代碼

在本例中，我們給父容器添加了inline-block屬性，塊狀格式化上下文之后，結果如下圖所示:

可以看到，父容器最終沒有高度坍塌，而是實實在在有了自己的高度，因此BFC元素可以用來清除浮動的影響，如果不清除，由于父容器高度坍塌必然會影響到其他元素的定位和布局，這顯然違背了BFC子元素不會影響外部元素的規定。除了浮動，還有什么CSS屬性會影響到外部元素的布局呢？在深入理解margin一文中，我們探討了margin疊壓的情況及計算方式，margin疊壓的產生實際上是兩個擁有margin的元素互相作用的結果，這和BFC元素不會影響外部元素的原理也是違背的，因此擁有BFC屬性的元素絕不會產生margin疊壓。眼見為實。

<!-- BFC --> <div style="margin: 20px">BFC元素和我沒法margin疊壓</div> <div style="display: inline-block;margin:20px"><div style="float: left;">我的父元素有BFC,我是左浮動</div><div style="float: right;">我的父元素有BFC,我是右浮動</div> </div> 復制代碼

2.BFC與流體布局

BFC的結界特性并不是為了去除margin疊壓或者是清除float的影響，而是實現更健壯，更智能的自適應布局。

在上一章中，我們實現了文字的環繞效果，那么先來做一個思考題，如何實現下圖的效果。

在上圖中我們實現文字與圖片相敬如賓的效果，有很多種做法可以實現如圖的效果，這里我提供兩種方法，對比一下各自的優缺點。第一種，優先利用浮動元素高度坍塌的特性，用margin實現圖文分離。

<!--利用高度坍塌的特性 --> <div style="width:200px"><div style="float: left;"><img width="100" height="100" src="../小和尚.jpg"></div><p style="margin-left: 100px">我不想實現文字環繞，因此需要多一些文字看一下效果，我不想實現文字環繞，因此需要多一些文字看一下效果</p> </div> 復制代碼

第二種，利用BFC的結界，徹底消除浮動元素的影響。（我們給文字元素加BFC屬性，不跟float元素一塊玩了）

<!-- BFC與流體布局 --> <div style="width:200px"><div style="float: left;"><img width="100" height="100" src="../小和尚.jpg"></div><p style="overflow: hidden;">我不想實現文字環繞，所以我不想和float有瓜葛我不想實現文字環繞，所以我不想和float有瓜葛</p> </div> 復制代碼

這里我們利用了BFC的表現原則，具有BFC特性的元素的子元素不會受到外部元素的影響，也不會影響外部元素，于是這里的文字為了不和浮動元素產生交集，順著浮動邊緣形成了自己的封閉上下文。這種方法比margin自適應更加智能，這里我們不管圖片的尺寸是多少（不超過父容器），都能實現這種兩欄布局。

3.了解BFC能幫助我們做什么

BFC擁有如此強大的自適應特性卻鮮為人知，這并不是前端程序員的錯，而是絕大部分觸發BFC屬性自身有一些奇怪的特性，導致兼顧自身特性和BFC特性的自適應布局變得非常困難。

（1）就拿float來說，float元素本身BFC化，然而浮動元素又具有破壞性和包裹性，失去了元素的的流體自適應性，因此我們反而更注重使用float的自身特性實現一些布局，而忽略了其BFC的特性。

（2）作為float的好兄弟postion：absolute，就更不用說了，脫離文檔流都不曉得到哪里去了，要實現所謂的自適應布局幾乎是做白日夢(fixed同理)。

（3）table-cell和table-row和table相關，現在的布局中已經很少用了，甚至沒多少人愿意花時間了解table的許多特殊機制（包括本人），因此table屬性幾乎已經快被“棄用”了。

（4）display：inline-block是CSS世界最偉大的發明之一，但他也同樣會改變元素本身的一些特性，如塊級元素申明inline-block后就失去了本身的水平流特性，使得元素尺寸包裹收縮，因此只能說有用武之地，但具體在哪里用，需要結合實際情況。

（5）overflow:hidden。在眾多申明BFC特性的屬性里，overflow:hidden是最不需要關心自身機制的一個屬性了，你甚至可以給所有的元素申明overflow:auto（當然這只是一句玩笑話，千萬別這么做）。說這句話的目的是為了突出，不管是什么元素，申明了overflow:hidden后，其自身特性還能完美保留，尤其是塊級元素的水平流特性，就是我們要保留的重點對象。

因此想要清除浮動影響的最佳屬性不是clear，而是overflow。我們也無需刻意的利用BFC進行自適應布局只要注意到BFC結界的特性會如何去影響布局即可。

本章內容到此為止，既然提到了overflow，下一章我們就來了解一下overflow相關的知識。有興趣可繼續關注后續內容~

不忘初心，方得始終

喜歡博主的童鞋可以掃描二維碼加博主好友~ 也可以掃中間二維碼入駐博主的粉絲群（708637831）~當然你也可以掃描二維碼打賞并直接包養帥氣的博主一枚。

轉載于:https://juejin.im/post/5d0adf8af265da1b7402023a

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的CSS进阶（10）—— 深入理解BFC结界的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。