在我們的開發中常聽到BFC這個詞，當要讓我說出BFC 是什麼，卻不能很好的卻解釋，似懂非懂。反正就是沒有清晰的理解，是這兩天仔細閱讀了相關資料加深自己對BFC理解。（BFC是Web頁面中盒模型佈局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。 ）
什麼是BFC
BFC:塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。
1 BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響。
2.如果一個元素符合觸發 BFC 的條件，則 BFC 中的元素佈局不受外部影響。
3.浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。
4.塊格式化上下文包含創建它的元素內部的所有內容.
5.在一個 BFC 中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
怎樣才能形成BFC
- 浮動元素 float的值不爲none。
- 絕對定位元素（元素的 position 爲 absolute 或 fixed）
- overflow值不爲 visible 的塊元素
- display值爲 flow-root的元素
- display的值爲table-cell, table-caption, inline-block中的任何一個。
- position的值不爲relative和static。
BFC應用
- 防止字體環繞
- 自適應兩（多）欄佈局
- 清除內部浮動
- 防止margin重疊
實際代碼中理解BFC
1.讓浮動內容和周圍的內容等高
在實際開發中我們會遇到浮動元素超出了父元素的高度。
<style>
.outer {
border: 5px dotted rgb(214,129,137);
width: 450px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
/* height: 200px; */
background: #fcc;
}
</style>
<body>
<div class="outer">
<div class="aside"></div>
<div class="main">I am a floated element.</div>
</div>
</body>
創建一個會包含這個浮動的BFC，通常的做法是設置父元素 overflow: auto 或者設置其他的非默認的 overflow: visible 的值。
.outer {
border: 5px dotted rgb(214,129,137);
width: 450px;
overflow: hidden;
}
2.不和浮動元素重疊
如果一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個覆蓋的現象，很多自適應的兩欄佈局就是這麼做的。比如下圖的效果，參考例子
<style>
.outer {
border: 5px dotted rgb(214,129,137);
width: 450px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="outer">
<div class="aside"></div>
<div class="main">I am a floated element.</div>
</div>
</body>
由於兩個box都處在同一個BFC中，都是以BFC邊界爲起點，如果兩個box本身都具備BFC的話，會按順序一個一個排列布局,我們這時可以觸發main生成BFC。
.main {
height: 200px;
background: #fcc;
overflow: hidden;
}
