BFC 定義
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"萨惑。它是一個(gè)獨(dú)立的渲染區(qū)域破婆，只有Block-level box參與浪汪， 它規(guī)定了內(nèi)部的Block-level Box如何布局变汪，并且與這個(gè)區(qū)域外部毫不相干伤为。
在解釋什么是BFC之前，我們需要先知道Box杀餐、Formatting Context的概念干发。
Box：css布局的基本單位
Box 是 CSS 布局的對(duì)象和基本單位， 直觀點(diǎn)來(lái)說(shuō)史翘，就是一個(gè)頁(yè)面是由很多個(gè) Box 組成的枉长。元素的類型和 display 屬性，決定了這個(gè) Box 的類型恶座。 不同類型的 Box搀暑， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染跨琳。讓我們看看有哪些盒子：
block-level box:display 屬性為 block, list-item, table 的元素自点，會(huì)生成 block-level box。并且參與 block fomatting context脉让；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素桂敛，會(huì)生成 inline-level box功炮。并且參與 inline formatting context；
run-in box: css3 中才有术唬， 這兒先不講了薪伏。
Formatting Context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域粗仓，并且有一套渲染規(guī)則嫁怀，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用借浊。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)塘淑。
BFC是一個(gè)獨(dú)立的布局環(huán)境，其中的元素布局是不受外界的影響蚂斤，并且在一個(gè)BFC中存捺，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會(huì)垂直的沿著其父元素的邊框排列。
BFC的布局規(guī)則
內(nèi)部的Box會(huì)在垂直方向曙蒸，一個(gè)接一個(gè)地放置捌治。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊纽窟。
每個(gè)盒子（塊盒與行盒）的margin box的左邊肖油，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)师倔。即使存在浮動(dòng)也是如此构韵。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器趋艘，容器里面的子元素不會(huì)影響到外面的元素。反之也如此凶朗。
計(jì)算BFC的高度時(shí)瓷胧，浮動(dòng)元素也參與計(jì)算。
如何創(chuàng)建BFC
1棚愤、float的值不是none搓萧。
2、position的值不是static或者relative宛畦。
3瘸洛、display的值是inline-block、table-cell次和、flex反肋、table-caption或者inline-flex
4、overflow的值不是visible
BFC的作用
1.利用BFC避免margin重疊踏施。
一起來(lái)看一個(gè)例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防止margin重疊</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<p>看看我的 margin是多少</p>
</body>
</html>
頁(yè)面生成的效果就是這樣的：
根據(jù)第二條石蔗，屬于同一個(gè)BFC的兩個(gè)相鄰的Box會(huì)發(fā)生margin重疊罕邀，所以我們可以設(shè)置，兩個(gè)不同的BFC养距，也就是我們可以讓把第二個(gè)p用div包起來(lái)诉探，然后激活它使其成為一個(gè)BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防止margin重疊</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: yellow;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden;
}
</style>
<body>
<p>看看我的 margin是多少</p>
<div>
<p>看看我的 margin是多少</p>
</div>
</body>
</html>
2.自適應(yīng)兩欄布局
根據(jù)：
每個(gè)盒子的margin box的左邊，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化棍厌，否則相反)肾胯。即使存在浮動(dòng)也是如此。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
頁(yè)面：
又因?yàn)椋?/p>
BFC的區(qū)域不會(huì)與float box重疊耘纱。
所以我們讓right單獨(dú)成為一個(gè)BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: rgb(139, 214, 78);
text-align: center;
line-height: 150px;
font-size: 20px;
}
.right {
overflow: hidden;
height: 300px;
background: rgb(170, 54, 236);
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
頁(yè)面：
right會(huì)自動(dòng)的適應(yīng)寬度阳液，這時(shí)候就形成了一個(gè)兩欄自適應(yīng)的布局。
3.清楚浮動(dòng)揣炕。
當(dāng)我們不給父節(jié)點(diǎn)設(shè)置高度帘皿，子節(jié)點(diǎn)設(shè)置浮動(dòng)的時(shí)候，會(huì)發(fā)生高度塌陷畸陡，這個(gè)時(shí)候我們就要清楚浮動(dòng)鹰溜。
比如這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動(dòng)</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
頁(yè)面：
這個(gè)時(shí)候我們根據(jù)最后一條：
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算丁恭。
給父節(jié)點(diǎn)激活BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮動(dòng)</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
overflow: hidden;
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
頁(yè)面：
總結(jié)
以上例子都體現(xiàn)了：
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器曹动，容器里面的子元素不會(huì)影響到外面的元素。反之也如此牲览。
因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響墓陈，因此， 當(dāng)BFC外部存在浮動(dòng)時(shí)第献，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局贡必，BFC會(huì)通過(guò)變窄，而不與浮動(dòng)有重疊庸毫。同樣的仔拟，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局飒赃，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度利花。避免margin重疊也是這樣的一個(gè)道理。
