CSS之BFC

對於不少初學者來講，CSS是不講「道理」的，可是若是去深究，會發現其實CSS是有必定道理的。
好比說最多見的塊級元素、內聯元素、文檔模型、層疊樣式模型、盒子模型CSS等，但還有一種FC規範常常會被排除在CSS規範的認知以外。

FC

FC固然不是「Fuck」的意思，英文名是「Formatting Context」,也就是格式化上下文，他是頁面中的一塊渲染區域，在這個區域內，有一套獨立的渲染規則，它決定了其子元素將如何佈局，以及和其餘元素的關係和相互做用，而且父級元素對它不能產生影響。

「FC」能夠簡單的理解爲瀏覽器對於某個元素樣式的一種處理方法，不能被開發者顯式的修改，符合FC規則的會計元素元素的屬性對於內部與外部元素會表現出必定的特性」。

FC分爲BFC、IFC、FFC、GFC四種類型。其中FFC、GFC是CSS3中才有的類型，後面將一一進行講解。

BFC

BFC全稱「Block Formatting Contexts」翻譯過來就是「塊級格式化上下文」。

符合如下任一條件即會生成一個「BFC」

• 根元素，HTML
• float屬性不爲none
• overflow屬性不爲visible
• display屬性爲inline-block、table-cell、table-caption
• position屬性爲absolute或者fixed

還有其餘條件也會觸發BFC，這裏只列了幾種比較常見的狀況，有興趣的能夠看一下MDN說明：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC佈局規則

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸，即便存在浮動也是如此。
• BFC的區域不會與設置了float屬性值的兄弟元素重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算。

下面經過幾個例子，只須要幾分鐘能夠明白BFC能幫咱們作什麼。

經過BFC清除浮動

.f-l { float: left; }
.warp { border: 1px solid red; display: inline-block; }
.div-1 { width: 100px; height: 100px; background: green; }
.div-2 { width: 200px; height: 200px; background: yellow; }

<div class="warp">
    <div class="div-1 f-l"></div>
    <div class="div-2 f-l"></div>
</div>

最外層元素將「display」屬性設置成了「inline-block」，隱性的造成了BFC。
BFC中的元素計算高度時浮動元素也是會參與計算的，達到了清除浮動的效果。

解決margin塌陷

.warp { background: black; display: inline-block; width: 200px; height: 200px; }
.div-1 { margin-top: 20px; width: 100px; height: 100px; background: green; }

<div class="warp">
    <div class="div-1"></div>
</div>

若是不符合BFC規範，會產生下面的效果，也就是「margin塌陷」。
所謂「margin塌陷」就是指CSS規則中，父元素與子元素頂部起始點在未加margin前是同一座標的狀況下，子元素的margin會影響父元素。

Box垂直方向的距離由margin決定，利用這一點能夠解決margin塌陷問題。

經典兩列布局

.warp { border: 1px solid red; }
.left { float: left; width: 150px; height: 200px; background: green; }
.right { overflow: hidden; height: 200px; background: yellow; }

<div class="warp">
    <div class="left"></div>
    <div class="right"></div>
</div>

BFC的區域不會與設置了float屬性值的兄弟元素重疊。
利用這一點能夠輕鬆的實現經典左右佈局。

最後總結

利用BFC還能夠作不少其餘的事情，例如：元素間上下margin間距問題、浮動元素高度計算問題