BFC 定義

BFC 全稱 Block Formatting Context，塊級(jí)格式化上下文。

一個(gè) BFC 是網(wǎng)頁中某個(gè)獨(dú)立的 CSS 渲染區(qū)域。

w3c 對(duì) BFC 定義

浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的塊級(jí)格式化上下文。
在一個(gè)塊級(jí)格式化上下文里，盒子從包含塊的頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的 margin 值所決定的。兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)發(fā)生疊加。
在塊級(jí)格式化上下文中，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動(dòng)也是如此，除非這個(gè)盒子創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。

BFC 的產(chǎn)生

• 根元素或包含它的其他元素
• 浮動(dòng)元素
• position: absolute 和 position: fixed 的元素
• display: inline-block 的元素
• overflow 被設(shè)置成 visible 外的值的塊狀元素
• <td> 和 display: table-cell 的元素
• <caption> 和 display: table-caption 的元素
• display: flow-root 的元素
• column-span: all 的元素

BFC 特性

1.內(nèi)部的Box會(huì)在垂直方向，從頂部開始一個(gè)接一個(gè)地放置。
2.Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。
3.每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
4.BFC的區(qū)域不會(huì)與float box疊加。
5.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，反之亦然。
6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

解決margin 合并問題

我們可以把目標(biāo)元素外層添加一個(gè) div 元素，設(shè)置 div 的border-top、padding-top、overflow:hidden、display:inline-block和display:flex。

// HTML
<p>hello world</p>
<p>hello world</p>
// CSS
p {
  color:black;
  background: #FF0000;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 30px;
}

兩個(gè)p元素每個(gè)p之間的距離為30px，發(fā)生了外邊距合并。 要解決這個(gè)合并問題即讓每個(gè)P之間是60px，我們可以新建一個(gè)BFC，怎么建呢？可以給p元素添加一個(gè)父元素，讓它觸發(fā)BFC。

// HTML
<p>hello world</p>
<div>
  <p>hello world</p>
</div>
// CSS
p {
  color:black;
  background: #FF0000;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 30px;
}
div{
  overflow:hidden;
}

抑制浮動(dòng)

// HTML
<div class="aside"></div>
<div class="main"></div>
// CSS
body {
  width: 300px;
  position: relative;
}
.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: blue;
}
.main {
  height: 200px;
  background: #f00;
}

創(chuàng)建一個(gè)新的BFC來解決這個(gè)問題，讓其內(nèi)容消除對(duì)外界浮動(dòng)元素的影響。給 main 類創(chuàng)建一個(gè)BFC,使其不受浮動(dòng)的影響。

// CSS
body {
  width: 300px;
  position: relative;
}
.aside {
  width: 100px;
  height: 150px;
  float: left;
  background: blue;
}
.main {
  height: 200px;
  background: #f00;
  overflow:hidden;
}

使用 BFC 實(shí)現(xiàn)了我們想要的兩欄布局

包含浮動(dòng)

// HTML
<div class="BFC">
    <div class="box"></div>
    <div class="box"></div>
</div>
// CSS
.BFC {
  border: 3px solid red;
  width: 300px; 
}
.box {
  border: 3px solid blue;
  width: 100px;
  height: 100px;
  float: left;
}

由于子元素浮動(dòng)脫離了文檔流，父元素?zé)o法包含住子元素，觸發(fā)父元素的 BFC，讓父元素包含兩個(gè)子元素。

// CSS
.BFC {
  border: 3px solid red;
  width: 300px; 
  overflow:hidden;
}
.box {
  border: 3px solid blue;
  width: 100px;
  height: 100px;
  float: left;
}