前言
關于BFC，很多人可能很熟悉，但有些人可能第一次聽說。對于熟悉的人無妨也可以溫習一下查缺補漏。對于還不是很了解的人認真閱讀完后，應該都能夠比較深入的理解BFC這個概念、作用以及用法。希望對大家有所收獲。
BFC是什么？
BFC全稱為 block formatting context，中文為“塊級格式化上下文”。它是一個獨立的渲染區域,規定了內部如何進行布局，并且內外部的元素之間互不影響。相對應的還有 IFC， 也就是inline formatting context，中文為“內聯格式化上下”。它不是本文的重點，感興趣的童鞋可以自行查閱了解。
如何形成BFC？
-
<html>根元素 -
float的值不為none -
overflow的值為auto、scroll或hidden -
display的值為table-cell、table-caption和inline-block中的任何一個 -
position的值不為relative和static
其中，最常見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就代表了該元素以及創建了一個BFC了。
BFC作用有哪些？
- 利用
BFC可以阻止垂直外邊距重疊 - 利用
BFC可以清除浮動 - 利用
BFC進行自適應布局 - 利用
BFC可以阻止被浮動元素覆蓋
BFC有什么特性？
特性1: BFC中元素會在垂直方向，從頂部開始一個接一個地放置。
我們平常說的盒子是由
margin、border、padding、content 組成的，實際上每種類型的四條邊定義了一個盒子，如圖分別是content box、padding box、border box、margin box，這四種類型的盒子一直存在，即使他們的值為0。而決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box。從頂部一個接一個放置可以理解為平時div一行一行塊級放置的樣式。
特性2: BFC中兩相鄰元素會發生折疊
元素垂直方向的距離由
margin決定。屬于同一個BFC的兩個相鄰元素的margin會發生疊加
實例代碼如下：
<p>ABC</p>
<p>abc</p>
p {
color: #fff;
background: #f66;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
效果圖：
上面例子中兩個P之間的距離本該為100px，然后實際卻為50px，主要原因是發生了margin折疊了。如果遇到這種情況，只需要將兩個P給其中一個P外面包一個div，然后通過觸發外面這個div的BFC，就可以阻止這兩個P的margin重疊。即利用BFC可以阻止垂直外邊距重疊。
特性3: BFC中父子之間是margin box與border box左邊相接觸。
每個元素的
margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
實例代碼如下：
<div class="wrap">
<div class="child">ABC</div>
</div>
.child {
color: #fff;
background: #f66;
width: 200px;
line-height: 50px;
text-align:center;
}
.wrap {
float: left;
border: 10px solid #fcc;
margin: 50px;
}
效果圖：
給子
div加浮動，浮動的結果，如果沒有清除浮動的話，父div不會將子div 包裹，但還是在父div的范圍之內，子div的兩邊邊接觸父div的border box 的兩邊，除非設置margin來撐開距離，否則一直是這個規則。
特性4: BFC的區域不會與float box疊加。
實例代碼如下：
<div class="aside"></div>
<div class="wrap">
<div class="child"></div>
</div>
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.child {
height: 200px;
overflow: hidden; //觸發main盒子的BFC
background: #fcc;
}
.wrap {
width: 500px;
}
效果圖：
上面
aside盒子有一個浮動屬性，覆蓋了child盒子的內容，child盒子沒有清除 aside盒子的浮動。只做了一個動作，就是觸發自身的BFC，然后就不再被aside 盒子覆蓋了。所以，BFC的區域不會與float box重疊。即利用BFC可以阻止被浮動元素覆蓋
特性5: BFC內外元素互不影響
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
實例代碼如下：
<div class="main">
<div class="child">ABC</div>
</div>
<div class="wrap">
<p>content</p> <p>content</p> <p>content</p> <p>content</p> <p>content</p>
</div>
.wrap {
height: 200px;
background: #AAA;
}
.main {
float: left;
width: 100px;
height: 100px;
background: #f66;
}
.child {
color: #fff;
padding-left: 200px;
line-height: 50px;
}
效果圖：
上面例子中，
main盒子形成了BFC,BFC是一個獨立的渲染區域里面ABC元素不管如何的位移變化都不會影響到外元素。
特性6: 計算BFC的高度時，浮動元素也參與計算。
實例代碼如下：
<div class="wrap">
<div class="child">ABC</div>
<div class="child">abc</div>
</div>
.wrap {
overflow: hidden;
width: 250px;
border: 5px solid #f66;
}
.child {
float: left;
width: 100px;
border: 5px solid #fcc;
line-height: 100px;
}
效果圖：
上面例子可以看出，為達到清除內部浮動，我們可以觸發
wrap生成BFC，即利用BFC來清除浮動。那么wrap在計算高度時，wrap內部的浮動元素child也會參與計算。
最后
如果本文對你有所幫助，歡迎點贊關注！！！大家加油。。
更多優質文章可以訪問GitHub博客，歡迎帥哥美女前來Star！！！
