1.基礎概念
塊級元素(block-level element)：那種被瀏覽器渲染為blocks的元素。如果某個元素的display屬性的值為：block，table，list-item的話，那么這個元素就是一個塊級元素。在這里我們需要注意到display值為inline-block的元素，他們是塊級容器元素。
塊級盒子(block-level box)：塊級盒子是一種參與了塊級排版上下文(BFC)的盒子，每個塊級元素都會生成一個塊級盒子，塊級盒子里面的內容有后代盒子以及generated content，并且后代盒子參與任何定位的計算。
塊級盒子在渲染層面中又可以更加細致的分為：content-box，padding-box，border-box，margin-box。
塊級容器元素(block container element)：如果某個元素的display屬性的值為inline-block，table-cell，table-caption的話，那么它們就是塊級容器元素。
元素的包含塊：如果元素的position的值是static或者relative的話，那么這個元素的包含塊就是距離自己最近的父輩塊級盒子的content-box。對于position的值是absolute的元素，那么包含塊就是距離自己最近的position的值為非static的父輩元素，而且這個父輩元素可以是任何類型，如果這個父輩元素是塊級元素的話，那么包含塊就是這個塊級元素的padding-box；如果這個父輩元素是行內元素的話，那么包含塊就是這個行內元素的content-box。對于浮動元素來說，其包含塊被定義為最近的塊級祖先元素。
排版上下文(Formatting context)：它是一種規則，這種規則的應用開關可以被開發人員控制。BFC：塊級盒子排版上下文；IFC：行內盒子排版上下文。當然，還存在著其他排版上下文，比如說FFC。
那么問題來了，我們怎么啟用BFC排版規則呢？答案就是對于浮動元素，絕對定位以及fixed定位，塊級容器元素，設置了overflow屬性不是visible的塊級元素來說，它們會給自己后代元素的布局開啟BFC規則。
在塊級排版上下文中定義了下面這些內容：在一個塊級排版上下文中，盒子是從包含塊頂部開始垂直的一個接一個的排列的，在一個塊級排版上下文中相鄰的塊級盒子之間的垂直margin是會發生折疊的。從文檔流中刪除的元素也不會參與BFC布局，比如說float元素以及position=absolute以及position=fixed元素。需要注意的地方是，:root元素會給自己的后代元素應用BFC排版規則。計算開啟了BFC排版規則的盒子的高度時，子類當中的浮動元素也會被包括在內。
上面所說的是塊級排版上下文中的垂直排版規則，下面說說水平排版規則。在塊級排版上下文中，每個盒子的左外邊是接觸到包含塊的左邊的。
2.BFC可以用來做什么
- 1.防止margin的重疊，BFC就是頁面上的一個隔離開來的獨立容器，開啟了BFC的元素就像是一堵墻，這樣做可以防止margin的重疊。當然了，這個功能就猶如雞肋，但還是看看演示效果：
<div class="bfc-create">
<div class="child child1"></div>
</div>
<div class="bfc-create">
<div class="child child2"></div>
</div>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bfc-create{
overflow: auto;
}
.child{
width: 300px;
height: 300px;
margin-top: 300px;
margin-bottom: 300px;
}
.child1{
background-color: red;
}
.child2{
background-color: green;
}
</style>
但是如果不給.bfc-create元素添加任何效果的話，那么效果圖將會是下面這樣：
- 2.清除浮動，這里說的清除浮動指的是清除由于子元素浮動所帶來的使得父元素高度塌陷的影響。下面來看看高度塌陷的效果：
如果我們讓父元素開啟BFC排版規則的話，那么將可以消除高度塌陷效果。為什么呢？這是因為計算開啟BFC排版規則的元素來說，浮動子元素的高度也會參與計算。可以看看效果：
<div class="container">
<div class="float"></div>
</div>
<style type="text/css">
.container{
border: 5px solid red;
overflow: auto;//去了則會塌陷
}
.float{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
</style>
當然還有其他清除浮動的方法，比如說下面這種，但是下面這種是為什么，目前并不曉得，權當留個印象。
.cf:before,.cf:after{
content: "";
display: table;
}
//必須在:after偽元素 clear:both
.cf:after{
clear: both;
}
.cf{
zoom: 1;
}
把上面的清除浮動的樣式應用到父元素上，即可避免高度塌陷的效果：
