BFC?
ps:一開始看到這名詞的時候我心里是拒絕的，什么鬼？
概念
(Block formatting context)直譯為格式化上下文，它是一個獨立的渲染區域。
布局規則
- 內部的Box會在垂直方向，一個接一個地放置；
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊；屬于不同BFC則不會；
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此；
- BFC的區域不會與float box重疊；
- BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此；
- 計算BFC的高度時，浮動元素也參與計算；
那些元素會形成BFC
- 根元素;
- float屬性部位none;
- position為absolute和fixed；
- display為inline-block, table-cell, table-caption, flex, inline-flex;
- overflow不為visible;
有啥子用？
- 清除浮動；
<div class="container">
<div class="item"></div>
</div>
<style>
.container {
border: 5px solid #fcc;
}
.item {
border: 3px solid #f66;
height: 200px;
width: 100px;
float: left;
}
</style>
浮動.jpg
若是用的float特性的話，很經常遇到這種撐不起父級高度的情況，這是可以用根據BFC的特性來解決它（6. 計算BFC的高度時，浮動元素也參與計算）：
.container {
border: 5px solid #fcc;
overflow: hidden;
}
浮動2
- margin重疊
<div class="container">
<p class="item"></p>
<p class="item"></p>
</div>
<style>
.container {
border: 5px solid #fcc;
}
.item {
height: 200px;
width: 100px;
margin: 20px;
overflow: hidden;
background: #fcc;
}
</style>
20px
設置div的邊距為20px的則兩個div垂直距離應該為40px;這個時候就發生了邊距重疊了；(Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊)
讓我們用BFC來解決他：
<div class="container">
<p class="item"></p>
<div class="item-container">
<p class="item"></p>
</div>
</div>
<style>
.container {
border: 5px solid #fcc;
}
.item {
height: 200px;
width: 100px;
margin: 20px;
overflow: hidden;
background: #fcc;
}
.item-container {
overflow: hidden;
}
</style>
此時我們用了div來單獨把一個p給獨立出來并且觸發div的BFC，此時的兩個p元素不在同一個BFC中也就防止了p元素之間的margin重疊；
記住BFC是一個隔離獨立容器和他的特性，容器內的子元素不會影響到外面的元素。
