BFC 是什么桑李？如何生成 BFC？BFC 有什么作用窿给？
BFC：
- 定義：BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"贵白。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與崩泡， 它規(guī)定了內(nèi)部的Block-level Box如何布局禁荒，并且與這個(gè)區(qū)域外部毫不相干。
- 浮動(dòng)元素角撞、絕對(duì)定位元素呛伴，不是塊級(jí)盒的塊級(jí)包含塊(比如inline-block、table-cell谒所、table-capation)和overflow值不為visible的塊級(jí)盒子為它們的內(nèi)容建立了一個(gè)新的塊級(jí)排版上下文热康。
- 在一個(gè)塊級(jí)排版上下文中，盒子是從包含塊頂部開(kāi)始劣领，垂直的一個(gè)接一個(gè)的排列的姐军，相鄰兩個(gè)盒子之間的垂直的間距是被margin屬性所決定的，在一個(gè)塊級(jí)排版上下文中相鄰的兩個(gè)塊級(jí)盒之間的垂直margin是折疊的剖踊。參與BFC的布局的只有普通流normal flow中的塊級(jí)盒庶弃，而float、position值不為relative\static的元素是脫離BFC這一布局環(huán)境的德澈，不參與BFC的布局。
- 在一個(gè)塊級(jí)排版上下文中固惯，每個(gè)盒子的左外邊是觸碰到包含塊的左邊的（對(duì)于從右向左的排版梆造，則相反），即使在有浮動(dòng)元素參與的情況下也是如此(即使一個(gè)盒子的行盒是因?yàn)楦?dòng)而收縮了的)，除非這個(gè)盒子新建了一個(gè)塊級(jí)排版上下文(在某些情況下這個(gè)盒子自身會(huì)因?yàn)閒loats而變窄)镇辉。
- 如果再到這幾個(gè)div的外面一層再包裹一個(gè)擁有BFC的元素的話屡穗，他們之間的margin便不會(huì)折疊了，因?yàn)锽FC里面的盒子和其外面的盒子間是不會(huì)有任何影響的忽肛。
當(dāng)塊級(jí)盒block-level box外層沒(méi)有BFC作保護(hù)村砂，有margin折疊
當(dāng)塊級(jí)盒block-level box外層有BFC作保護(hù)時(shí)(比如給下圖灰色邊框線盒子一個(gè)float:left)
Box
- 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抛腕；
- nline-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)给猾。
- CSS2.1 中只有 BFC 和 IFC, **CSS3 **中還增加了 GFC 和 FFC颂跨。
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ì)算。
哪些元素會(huì)生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
BFC的作用及原理
- 1.自適應(yīng)兩欄布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
每個(gè)元素的margin box的左邊味榛， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化名秀，否則相反)。即使存在浮動(dòng)也是如此匕得。
.main {
overflow: hidden;
}
BFC的區(qū)域不會(huì)與float box重疊。
- 2.清除內(nèi)部浮動(dòng)
<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>
父元素高度塌陷
.par {
overflow: hidden;
}
計(jì)算BFC的高度時(shí)略吨，浮動(dòng)元素也參與計(jì)算考阱，為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)par生成BFC乞榨，那么par在計(jì)算高度時(shí)，par內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算考榨。
- 3.防止垂直 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>
兩個(gè)p之間的距離為100px鹦倚，發(fā)送了margin重疊。Box垂直方向的距離由margin決定震叙。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
<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>
我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC乐尊。那么兩個(gè)P便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了科吭。
