BFC（Block Formatting Context）塊級(jí)格式化上下文
注意：BFC首先是塊姚建，其次需要具備下面的條件之一才可以（通俗來(lái)說(shuō)掸冤，BFC就好比一所985或者211的高校稿湿，想要成為985或者211的高校饺藤，它是有前提條件的策精，首先他得是一所大學(xué)咽袜，不能拿一個(gè)小學(xué)來(lái)說(shuō)询刹，就好比BFC得先是塊萎坷，才是BFC哆档；當(dāng)滿足了前提條件，再需要具備其他的條件才可以比原。）
在正式說(shuō)BFC具體內(nèi)容之前量窘，先說(shuō)一下Box和Formatting Context是個(gè)什么東西：
Box：大家應(yīng)該都不陌生氢拥，Box是CSS布局的對(duì)象和基本單位嫩海，直觀點(diǎn)說(shuō)就是一個(gè)頁(yè)面是由很多個(gè)Box組成的叁怪。不同類型的Box骂束，會(huì)參與不同的Formatting Context（一個(gè)決定如何渲染文檔的容器）展箱，因此Box內(nèi)的元素會(huì)以不同的方式來(lái)渲染混驰。
常見盒子類型：
- 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 fomatting context鞍陨。
- run-in box：CSS3中新增的诚撵，是一個(gè)塊/行內(nèi)元素混合，可以使某些塊級(jí)元素成為下一個(gè)元素的行內(nèi)部分幼驶，目前很少有瀏覽器支持該元素盅藻。
Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念氏淑。它是頁(yè)面中的一塊渲染區(qū)域假残，并且有一套渲染規(guī)則辉懒，它決定了其子元素將如何定位谍失，以及和其他元素的關(guān)系和相互作用快鱼。
常見的Formatting context：
- Block Formatting Context（簡(jiǎn)稱BFC）
- Inline Formatting Context（簡(jiǎn)稱IFC）
- CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC抹竹。
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"窃判。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與創(chuàng)建BFC窿凤， 它規(guī)定了內(nèi)部的Block-level Box如何布局雳殊，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響夯秃，當(dāng)然也不會(huì)影響到外面的元素仓洼。
BFC的觸發(fā)條件：
- 根元素 （當(dāng)前文檔中 html 標(biāo)簽就是一個(gè)BFC）
- float 的值不為 none
- overflow 的值不為 visible（有 hidden色建，auto，scroll）
- display 的值為 inline-block / table-cell / table-caption / flex / inline-flex
- position 的值為 absolute 或 fixed
BFC的特性（優(yōu)點(diǎn)）以及應(yīng)用場(chǎng)景
1某残、box垂直方向的距離由margin決定玻墅，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊
應(yīng)用場(chǎng)景：可以解釋為什么margin上下會(huì)重疊澳厢，以及解決方法的原因
- 問(wèn)題分析：默認(rèn)情況下剩拢，兩個(gè)相鄰的box的margin會(huì)發(fā)生重疊的原因徐伐，是因?yàn)閎ox1和box2都屬于html搬素，而html是BFC熬尺。BFC里面規(guī)定了粱哼，屬于同一個(gè)BFC的兩個(gè)相鄰box的margin會(huì)發(fā)生重疊揭措，所以box1和box2重疊了刻蚯，也就是外邊距重疊炊汹。
默認(rèn)情況下，兩個(gè)相鄰的box的margin會(huì)發(fā)生重疊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;}
.box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
如圖所示
- 重疊之后，想要不重疊伴找，可以給后面的元素添加一個(gè)父元素并且添加聲明overflow: hidden;來(lái)解決（添加其他聲明也可以，只要可以觸發(fā)BFC即可）
- 可以解決的原因是因?yàn)槎队?dāng)給box2添加了父元素并且添加了overflow:hidden;之后寸五，這個(gè)父元素boxs就是BFC了梳杏，當(dāng)前的結(jié)構(gòu)里面box1屬于BFC html淹接，box2屬于BFC boxs塑悼，這個(gè)時(shí)候box1和box2就不屬于同一個(gè)BFC了，那么也就不會(huì)發(fā)生重疊了霞势。
具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.box1{width: 300px;height: 300px;background: red;margin-bottom: 50px;}
.box2{width: 400px;height: 400px;background: yellow;margin-top: 100px;}
.boxs{overflow: hidden;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="boxs">
<div class="box2"></div>
</div>
</body>
</html>
如圖所示
實(shí)現(xiàn)效果：（給box2添加父元素并聲明觸發(fā)BFC即可解決）
2愕贡、計(jì)算BFC的高度時(shí)固以，浮動(dòng)元素也參與計(jì)算
應(yīng)用場(chǎng)景：可以解釋為什么高度塌陷可以用overflow：hidden等方法解決
- 分析：為什么添加了overflow:
hidden;就可以解決高度塌陷憨琳，是因?yàn)樘砑恿酥笱眩陀|發(fā)ul為BFC问拘，而BFC里面規(guī)定了慢味，計(jì)算BFC高度的時(shí)候纯路，浮動(dòng)元素也參與計(jì)算驰唬。
ul未觸發(fā)BFC時(shí)叫编，li浮動(dòng)時(shí)霹抛，ul高度塌陷：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul{margin: 0;padding: 0;}
ul{border: 3px solid red;}
ul li{float: left;list-style: none;border: 1px solid yellow;}
</style>
</head>
<body>
<ul>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
</ul>
</body>
</html>
如圖所示
當(dāng)給ul添加了overflow：hidden霞篡；之后端逼，就觸發(fā)了ul為BFC顶滩，而計(jì)算BFC高度的時(shí)候礁鲁，浮動(dòng)元素也參與計(jì)算：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
ul{border: 3px solid red;overflow: hidden;}
ul li{float: left;list-style: none;border: 1px solid yellow;}
</style>
</head>
<body>
<ul>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
<li>浮動(dòng)元素</li>
</ul>
</body>
</html>
如圖所示
overflow：auto冗美，scroll或者display：flex着憨，inline-flex甲抖，table等心铃，都可以解決高度塌陷，也是因?yàn)橛|發(fā)了ul為BFC
3柱衔、BFC的區(qū)域不會(huì)與float box發(fā)生重疊
應(yīng)用場(chǎng)景：自適應(yīng)兩欄布局或者三欄布局
- 分析： 上面的一個(gè)元素浮動(dòng)唆铐，下面的一個(gè)元素沒(méi)有浮動(dòng)，那么會(huì)發(fā)生重疊艾岂，原因是因?yàn)楦?dòng)之后不占據(jù)位置王浴，所以后面的元素會(huì)上去
- 當(dāng)給下面的元素添加了float、overflow秒裕、display的時(shí)候就不重疊了几蜻，原因是因?yàn)榻o了這些聲明之后入蛆，就觸發(fā)了下面的元素為BFC硕勿，而BFC里面規(guī)定了源武，BFC區(qū)域不會(huì)與浮動(dòng)盒子發(fā)生重疊粱栖。
- 如果既要BFC區(qū)域不會(huì)與float box發(fā)生重疊，又要右邊的容器自適應(yīng)：
float不可以幔崖，
overflow：hidden赏寇、auto嗅定、scroll用踩；可以，
display：flex姊扔、inline-flex旱眯；可以证九。
當(dāng)上面元素設(shè)置浮動(dòng)呀页，下面元素沒(méi)有浮動(dòng)，那么就會(huì)發(fā)生重疊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left {width: 300px;height: 300px;background: red;float: left;}
.right {height: 400px;background: yellow;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
如圖所示
當(dāng)下面元素添加聲明丸氛，觸發(fā)BFC缓窜，就不會(huì)與浮動(dòng)盒子發(fā)生重疊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.left {width: 300px;height: 300px;background: red;float: left;}
.right {height: 400px;background: yellow;overflow: hidden;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
如圖所示
應(yīng)用：自適應(yīng)兩欄布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,ul,ol{ margin: 0; padding: 0;}
html,body{height: 100%;}
.left{width: 300px;height:500px;background: #0000FF;float: left;}
.right{height: 600px;background: yellow;overflow: hidden;}
</style>
</head>
<body>
<div class="left">left固定</div>
<div class="right">right自適應(yīng)</div>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
可以實(shí)現(xiàn)右側(cè)自適應(yīng)的方法屬性有：
overflow: hidden、auto黄娘、scroll;
display: flex、inline-flex;
應(yīng)用：三欄布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{ margin: 0; padding: 0;}
html,body{height: 100%;}
.left{
width: 100px;height: 200px;background: red;float: left;
}
.center{
height: 400px;background: #00FFFF;overflow: hidden;margin-right: 200px;
}
.right{
width: 200px;height: 300px;background: #008000;float: left;position: absolute;top: 0;right: 0;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</body>
</html>
實(shí)現(xiàn)效果如圖所示：
不同分辨率下左右兩側(cè)內(nèi)容固定不變氮凝，中間內(nèi)容自適應(yīng)（下面因?yàn)閳D片放大了所以左右兩側(cè)顯得變大了，實(shí)際上并沒(méi)有改變大衅羯恪）：
想要了解更多寫法傅是，可以看下篇詳解蕾羊，應(yīng)用場(chǎng)景中的自適應(yīng)兩欄布局或者三欄布局以及圣杯布局和雙飛翼布局龟再。
在BFC中利凑，最重要的就是上面三組特性，每個(gè)特性的應(yīng)用場(chǎng)景都是非常廣泛的牌借，在現(xiàn)實(shí)開發(fā)過(guò)程中膨报，也會(huì)經(jīng)常用到。至于下面的三個(gè)特性就簡(jiǎn)單了解一下就可以了适荣。
4丙躏、BFC內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)的放置束凑。
5晒旅、每個(gè)元素的margin box的左邊會(huì)與包含塊border box的左邊相接觸（對(duì)于從左到右的格式化，否則相反）汪诉，即使存在浮動(dòng)也會(huì)如此废恋。
6、BFC就是頁(yè)面上的一個(gè)獨(dú)立容器扒寄，容器里面的元素不會(huì)影響到外面的元素
到這里BFC就結(jié)束了鱼鼓，總結(jié)一下BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器该编，容器里面的子元素不會(huì)影響到外面的元素置媳。反之也如此拇囊。
喜歡的朋友可以點(diǎn)點(diǎn)關(guān)注寥袭，點(diǎn)點(diǎn)贊队寇，前端小白炭序，需要各位大佬的垂愛，歡迎評(píng)論區(qū)留言互動(dòng)辜纲，多多指教杀糯。
