BFC是什麼？
在解釋BFC元素之前，先看一下另外兩個概念Box,Formatting Context的概念
Box：是CSS佈局的對象和基本單位，一個頁面是由很多 Box組成的。元素的類型和display屬性決定了這個Box的類型。不同類型的Box,會參與不同的Formatting Context(決定如何渲染文檔的容器)，因此Box內的元素會以不同方式進行渲染。
1.block-level box:display屬性爲block,list-item,table的元素會生成block-level box。並參與block fomatting context;
2.inline-level box:display屬性爲inline屬性爲inline,inline-block,inline-table屬性，會生成inline-level box。並參與inline formatting context;
3.run-in box:表現行爲如下：
1.如果run-in框包含一個塊框，那麼run-in框變爲塊框。
2.如果run-in框的後繼兄弟爲塊框（非浮動，非絕對定位），那麼run-in框變爲該塊框的第一個行內框。run-in不能直接插入本身的run-in的快中，也不能插入塊中已有run-in的塊中。
3.否則，run-in框變爲塊框
Formatting:
Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及其他元素的關係和相互作用。最常見的Formatting context有Block fomatting(簡稱BFC)和Inline formatting context(簡稱IFC)
CSS2.1中只有BFC和IFC，CSS3中還增加了GFC和FFC
更多有關Formatting的介紹可以看這篇文章css3中的BFC,IFC,GFC和FFC
BFC定義
BFC(Block formatting context)譯爲”塊級格式化上下文”,它是一個獨立渲染的區域，只有Block-level box參與，它規定了內部的Block-level Box該如何佈局，並且與這個區域外部毫不相干，是一個隔離渲染的區域，容器裏面的子元素不會在佈局上影響到外面的元素
哪些元素會產生BFC元素：
根元素
float屬性不爲none的元素
position爲absolute或者fixed
display爲inline-block,table-cell,table-caption,flex,inline-flex
overflow不爲visible
BFC與流體佈局
BFC最重要的特性在於它可以實現更加健壯，更加智能的自適應佈局
實例1：基本文字環繞效果
<style>
.father{width: 400px;border:1px solid red}
img{float:left}
</style>
<div class="father">
<img src="./zhuxian.png" alt="">
<p class="animal">小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，
小貓，小貓，小貓，小貓，小貓，貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，小貓，</p>
</div>頁面：
這個時候，.animal中的內容顯然受到了設置float屬性值的圖片的影響而被環繞了。此時如果我們給.animal元素設置具有BFC特性的屬性，如overflow:hidden;
普通流體元素在設置了overflow:hidden後，會自動填滿容器中除了浮動元素以外的聲譽空間，形成自使用佈局效果，而且這種自適應佈局要比純流體自適應佈局更加智能。比如，我們可以自動填滿剩餘的空間。
和機遇純流體特性實現的多欄自適應佈局，基於BFC特性的自適應佈局有如下優點：
1.自適應內容由於封閉而更加健壯，容錯性更強。例如：內部設置clear:both不會發生與float元素相互干擾而導致錯位，
2.自適應內容自動填滿浮動以外的區域，無需關心浮動元素的寬度，可以整個網站大規模使用，可以使用通用的佈局類名：
.left{float:left;}
.right{float:right}
.bfc{overflow:hidden}只要遇到兩欄佈局就可以直接使用上面的結構類名完成基本佈局。
而純流體佈局需要大小不確定的margin或者padding等值撐開合適的間距，無法CSS組件化。
BFC常見使用場景
1.清除浮動
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
由BFC佈局規則：計算BFC的高度時，浮動元素也參與計算
爲了達到內部清除浮動，我們可以出阿發par生成BFC,那麼par在計算高度時,par內部的浮動元素child也參與計算
.par{
overflow:hidden;
}代碼：
.par{
overflow:hidden;
}效果如下：
2.防止垂直方向上的margin發生重疊
代碼：
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
頁面效果：
兩個p之間的距離是100px,發生了margin重疊
由BFC佈局規則：
Box垂直方向上的距離由margin決定。屬於同一個BFC的兩個相鄰的Box的margin會發生重疊
所以，爲了解決這個問題我們可以在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，垂直方向上就不會發生margin重疊了
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>