CSS佈局基礎——BFC

what's BFC?

第一次看到這個名詞，我是拒絕的，css何時還有這個東西？因而火燒眉毛的google了一下，才發現原來它無時無刻不在咱們的css當中，只不過它並非一個屬性，不須要咱們日常使用手寫罷了。可是它的重要性確是槓槓的，能夠這麼說，沒有它就就沒有什麼css佈局。
BFC,全稱 Block Formatting Context，翻譯成塊級格式化上下文，它就是一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。

看一大堆文字可能有點抽象，如今拿個js函數來比喻說明一下吧，咱們如今有一個叫作bfc的函數，而一個函數就是一個塊級做用域，這裏面全部的變量申明、運行都在這個塊級做用域內進行。理所固然，一個環境中的變量不會影響到其它環境變量。

var box =1;
function bfc(){
    var box = "2";
    console.log(box);
}
bfc();//2
console.log(box)//1

因此，咱們是否是能夠這樣理解：所謂的BFC就是css屬性的執行域？

BFC的生成

既然js能夠經過函數等方法來實現塊級做用域，我想那css確定也是能夠經過一些手段來實現BFC的。
這裏BFC的官方文檔寫到：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

從這段描述能夠清楚知道，如下方法能夠建立一個新的塊級執行上下文（BFC）：

1. 浮動元素、
2. 絕對定位元素，
3. 塊級元素以及塊級容器(好比inline-block、table-cell、table-capation)
4. overflow值不爲visible的塊級盒子

固然，root元素會自動生成一個BFC，這個應該很好理解,畢竟須要一個根BFC來佈局

執行規則

既然存在了執行環境，那確定會存在執行規則。BFC的

1.在一個塊級排版上下文中，盒子是從包含塊頂部開始，垂直的一個接一個的排列的。每一個盒子的左外邊是觸碰到包含塊的左邊的（對於從右向左的排版，則相反）

這個應該不難理解。就是咱們若是在裏寫幾個<div>，它會依次垂直排列，而且都是在頁面的最左邊（對於從右向左的排版，則相反）。

2.相鄰兩個盒子之間的垂直的間距是被margin屬性所決定的，在一個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是摺疊的。

這句描述是否是超級熟悉，這不是我css常見的邊距摺疊問題嗎？如今知道它出自哪裏了吧，就是這裏。下面的倆個盒子各有上下20px的間距，加起來應該有40px,但顯然，如今只有20px;

<style>
.top{
    width:100px;
    height:100px;
    background:#000;
    margin:20px 0;
}
.bottom{
    width:100px;
    height:100px;
    background:#000;
    margin:20px 0;
}
</style>
<div  class="top"></div>
<div  class="bottom"></div>

發生邊距摺疊是由於同一個BFC的關係(根BFC)。既然知道緣由，解決就好辦了，讓他們倆個不在同一個BFC就ok啦。

3. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。

經過這條屬性，咱們又能夠想到哪些呢。對，浮動元素的塌陷問題。咱們知道，一個元素中的子元素浮動了，這個父元素就會發生高度塌陷問題。下例中一旦內部的紅色元素浮動，藍色的盒子就沒法被撐起，高度會變成0。

<style>
.wrap{
    width:150px;
    background:#ADD9E6;
    margin:20px 0;
}
.in{
    width:100px;
    height:100px;
    background:#FFCCCC;
    margin:20px 0;
    //float:left;
}
</style>
<div class="wrap"><div class="in"></div></div>

如今咱們知道了，這是由於浮動元素建立了一個新的BFC，成爲了一個獨立的容器，不會影響到外面的父元素了。它的定位規則再也不受制於這個父元素了。如何解決這一問題？咱們知道只要在在父元素加上overflow:hidden能夠清除浮動。可是這又是爲何？

其實，這就是前面提到的overflow:hidden能夠生成一個新的BFC，而這個浮動的子元素，被它所包含了，從而成爲一個獨立容器，它的float外溢不了了，外面的元素再也不受其浮動的影響，從而達到了清除浮動的做用。