CSS進階（10）—— 深刻理解BFC結界

本章繼續來探討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）~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。