一、BFC是什麼？
BFC是定義了在正常流中塊元素的佈局方式。怎麼理解，看下面敘述。
當一個元素的position聲明爲static或者是默認狀態下，這個元素就會被佈局在正常流中。我們知道在根元素也就是html或者body元素中嵌套一個塊元素的話，這個塊元素就會儘可能的向左和向上的位置進行佈局。那麼爲什麼會這樣？這是因爲這個根元素爲這個塊元素生成了一個BFC的環境，這個環境決定了這個塊元素的佈局方式要按照BFC定義的方式進行佈局，也就是儘可能的向上向左。
更直白的說，我只要將一個元素的內部也就是其子元素放置的環境聲明爲BFC環境，那麼在這個元素內部所有的子元素就會按照BFC規定的方式進行佈局。那麼如何聲明這麼一個BFC環境呢？
二、如何聲明BFC環境
如果一個元素滿足如下性質，那麼就會爲其子元素定義了一個BFC環境。
1.浮動
2.絕對定位
3.非塊盒的塊容器（一般是 inline-block 、table-cell、table-caption）注意沒有div或者廣義的說沒有display爲block的元素，因爲div是一個塊盒。
4.‘overflow’不爲visible的快盒。
那麼，問題來了，一個元素聲明瞭overflow:hidden和display:inline-block能不能產生BFC？
答案可能是yes，原因是滿足了非塊盒的塊容器，雖然不滿足‘overflow’不爲visible的快盒。
三、在BFC環境下的元素如何佈局？
在一個BFC環境下，豎直方向上，盒子一個接一個的從包含快的最頂端放置，也就是說儘可能的靠上放置。水平方向上，每個盒子儘可能的向左放置。即使存在浮動元素也不例外。並且由於BFC環境流失正常流環境，所以說垂直相鄰的塊元素的margin能夠合併。
四、聲明BFC元素的高度問題。
1如果它只含有內聯級子級，高度就是最高的行盒的top與最低的行盒的bottom之間的距離
2如果它只含有塊級子級，高度由就是最高的塊級子級盒的top margin-edge到最低的塊級子級盒的bottom margin-edge之間的距離
3絕對定位的子級會被忽略，而相對定位的盒不考慮其偏移。
4對於浮動元素，那麼聲明BFC的元素也就是“父元素”的高度要包含浮動元素的margin框。前提是這個浮動元素是該父元素的直接子元素。
五、應用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {text-align:center;}
.catalogue {
width:1000px;
margin:0 auto;
}
.bfc {
margin:30px 0;
overflow: hidden; /*清浮動*/
zoom:1;
height:20px;
}
.bfc > div {
margin:0 20px;
}
.bfc .name {
float: left;
}
.bfc .page {
float: right;
}
.bfc .line {
height:100%;
background:#fff url(style/point.png) center repeat-x;
overflow: hidden; /*BFC在浮動周圍環繞 但是浮動元素不會覆蓋BFC*/
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BFC應用之目錄線</title>
</head>
<body>
<h1>日常應用目錄、欄目標題等</h1>
<div class="catalogue">
<div class="bfc">
<div class="name">CSS3的REM設置字體大小</div>
<div class="page">w3cplus</div>
<div class="line"></div>
</div>
<div class="bfc">
<div class="name">FONT SIZING WITH REM </div>
<div class="page">Jonathan Snook</div>
<div class="line"></div>
</div>
<div class="bfc">
<div class="name">There’s more to the CSS rem unit than font sizing </div>
<div class="page">css-tricks</div>
<div class="line"></div>
</div>
</div>
</body>
</html>
具體在該例子中對於浮動和BFC關係請到 http://blog.csdn.net/wmaoshu/article/details/52995912