BFC應用

塊級格式化上下文（Block Formatting Context）是網頁CSS視覺渲染的一部分，並用於決定塊盒子的佈局。在定位體系（Positioning Scheme）中它屬於常規流（Normal Flow）。
浮動、絕對定位元素（position 爲 absolute 或 fixed）、行內塊元素 display:inline-block、表格單元格display:table-cell、表格標題 display:table-caption 以及 overflow 屬性值不爲 visible 的元素都將建立一個新的塊級格式化上下文。
一個BFC就是一個HTML盒子，它至少知足如下條件之一：

• 根元素或其它包含它的元素；
• 浮動 (元素的float不爲none)；
• 絕對定位元素 (元素的position爲absolute或fixed)；
• 行內塊inline-blocks(元素的 display: inline-block)；
• 表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
• overflow的值不爲visible的元素；
• 彈性盒 flex boxes (元素的display: flex或inline-flex)；

最多見的是: overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就表明了該元素以及建立了一個BFC了。
在一個塊級格式化上下文中，盒子在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由’margin’屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合並，水平方向上margin不合並。

建立一個塊級格式化上下文

一個BFC能夠顯式觸發。若是咱們想建立之，咱們只需給它添加上面提到的任何一個CSS樣式。
一個新的BFC能夠經過給容器添加任意一個必要的CSS樣式來建立，好比overflow: scroll，overflow: hidden，display: flex，float: left，或 display: table。儘管上述條件均可以建立BFC，但也會產生一些其餘效果，如：

• display: table 可能引起響應性問題
• overflow: scroll 可能產生多餘的滾動條
• float: left 將把元素移至左側，並被其餘元素環繞
• overflow: hidden 將裁切溢出元素
  因此不管什麼時候，當要建立一個BFC時，咱們要基於需求選擇最恰當的樣式。

BFC中盒子的對齊

W3C規範中講到：在BFC上下文中，每一個盒子的左外側緊貼包含塊的左側（從右到左的格式裏，則爲盒子右外側緊貼包含塊右側），甚至有浮動也是如此 （儘管盒子裏的行盒子 Line Box 可能因爲浮動而變窄），除非盒子建立了一個新的BFC（在這種狀況下盒子自己可能因爲浮動而變窄）。

BFC應用

清除浮動

在這之前，知道給父元素設置overflow:hidden能夠清除子元素的浮動，可是不知道原理是什麼。如今學習了BFC後，理解了其原理：當在父元素中設置overflow:hidden時就會觸發BFC，因此他內部的元素就不會影響外面的佈局，BFC就把浮動的子元素高度當作了本身內部的高度去處理溢出，因此外面看起來是清除了浮動。