BFC是什么？

BFC，塊狀格式化上下文，其實(shí)是一個(gè)隔離的獨(dú)立盒子（容器），他有以下特性：

• 容器里面的子元素不會(huì)影響到外面的元素，容器外的元素也不會(huì)影響到里面
• BFC容器會(huì)一個(gè)挨著一個(gè)排列
• 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
• BFC的區(qū)域不會(huì)與float box重疊

怎樣觸發(fā)（創(chuàng)建）一個(gè)BFC？

• boby的根節(jié)點(diǎn)
• 浮動(dòng)的元素：float除了none以外
• 絕對(duì)定位的元素：position（absolute、fixed）
• display為inline-block、table-cells、flex、inline-flex、flow-root（沒有副作用的方案，但需注意兼容性）、grid、inline-grid等
• overflow除了visible之外

BFC有什么用？

1. 清除浮動(dòng)：因?yàn)锽FC可以包含浮動(dòng)的元素，故把浮動(dòng)元素的父元素設(shè)為BFC容器即可

<!-- html -->
<div class="box">
  <div class="floatDiv">
    我是一個(gè)浮動(dòng)的div，現(xiàn)在我想讓它高一點(diǎn)，高過另外一行文字吧，對(duì)吧，這樣才能看到效果
  </div>
  這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)（有多長(zhǎng)隨便啦）的文字
</div>

/* CSS */
.box {
  border: 5px dotted #faa509;
  padding: 10px;
  width: 300px;
}
.floatDiv {
  float: left;
  border: 2px solid #00d0ff;
  width: 100px;
}

現(xiàn)在的效果如圖：

未消除浮動(dòng)

按照以前的方案，一般會(huì)在后面加一個(gè)空的div標(biāo)簽來清除浮動(dòng)（或者有其他各種方案）

<!-- html -->
<div class="box">
  <div class="floatDiv">
    我是一個(gè)浮動(dòng)的div，現(xiàn)在我想讓它高一點(diǎn)，高過另外一行文字吧，對(duì)吧，這樣才能看到效果
  </div>
  這是一段很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)很長(zhǎng)（有多長(zhǎng)隨便啦）的文字
  <div class="clearfix"></div>
</div>

/* 添加CSS */
.clearfix{
  clear: both;
}

那么使用BFC特性怎么操作呢？
很簡(jiǎn)單，只需要給.box加多一個(gè)樣式使其變成BFC就可以了

/* 添加CSS */
.box{
  display: flow-root;
}

效果圖如下：

BFC消除浮動(dòng)

2. 解決元素間上下邊距發(fā)生折疊的問題（外邊距塌陷）：把元素放入（注意：是放入，不是設(shè)置成）不同的BFC容器中

<!-- html -->
<div class="container">
  <p class="text">這是一堆文字</p>
  <p class="text">隨便寫，開心就好</p>
</div>

/* CSS */
.container {
  border: 5px dotted #faa509;
  width: 300px;
  background: #ccc;
}
.text{
  border: 1px solid #faa509;
  margin: 20px;
  text-align: center;
}

現(xiàn)在的效果圖為：

上下邊距塌陷

• 發(fā)現(xiàn)問題：認(rèn)真看一眼，會(huì)發(fā)現(xiàn)，其實(shí)第一段文字和第二段文字中間的margin加起來應(yīng)該是40px，但是現(xiàn)在效果圖看來只有20px。這就是上下邊距折疊，也就是外邊距塌陷。
• 解決問題：那么怎么解決這個(gè)問題呢？就是上面所說的，把元素放入不同的BFC容器中
  為什么這里要強(qiáng)調(diào)是放入而不是設(shè)置成，因?yàn)楸救艘婚_始只是把兩段文本設(shè)置成不同的BFC容器，然后就陷入了短暫的懵比。

/* 添加CSS */
.text{
  display: flow-root;
}

添加上面css后，會(huì)發(fā)現(xiàn)，一點(diǎn)改變都沒有，如圖：

設(shè)置成不同的BFC

正確的姿勢(shì)應(yīng)該是：

<!-- 修改html -->
<div class="container">
  <p class="text">這是一堆文字</p>
  <div class="textBox"> <!-- 用textBox把其中一段文本包起來 -->
    <p class="text">隨便寫，開心就好</p>
  </div>
</div>

/* 添加CSS */
.textBox{
  display: flow-root;
}

首先用一個(gè)div把文本包起來，再把這個(gè)div設(shè)置為BFC，這樣，上下邊距折疊的問題就解決了，如圖：

放入不同的BFC

3. 防止元素間的重疊覆蓋，可實(shí)現(xiàn)自適應(yīng)兩列布局：左邊元素左浮動(dòng)，右邊元素設(shè)置為BFC容器

先看一下元素間重疊是怎樣的

<!-- html -->
 <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

/* CSS */
.container {
  border: 5px dotted #faa509;
  width: 300px;
}
.left{
  background: #fadc09;
  height: 100px;
  width: 100px;
  float: left;
}
.right{
  height: 300px;
  background: #faa509;
}

元素間重疊

你會(huì)發(fā)現(xiàn)，浮動(dòng)的元素和不浮動(dòng)的元素重疊在一起了，利用BFC的區(qū)域不會(huì)與float box重疊的特性，我們就可以簡(jiǎn)單的實(shí)現(xiàn)兩列布局了。只需要把右邊元素設(shè)置為一個(gè)BFC就行

/* 添加CSS */
.right{
  display: flow-root;
}

兩欄布局

竟然說到了兩欄布局，那就順便介紹一種黑魔法實(shí)現(xiàn)等高兩欄布局，直接上代碼

<!-- html -->
 <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

/* CSS */
.container {
  border: 5px dotted #faa509;
  width: 300px;
  overflow: hidden;
}
.container>div{
  /* 注意這里 */
  padding-bottom: 100000px;
  margin-bottom:  -100000px;
}
.left{
  background: #fadc09;
  height: 100px;
  width: 100px;
  float: left;
}
.right{
  height: 300px;
  background: #faa509;
  display: flow-root;
}

兩欄等高布局

它根據(jù)子元素的最大高度來決定整體高度，可以隨意改變.left或者.right的高度來測(cè)試一下是否符合等高，也可以往里面填充內(nèi)容測(cè)試

順便提一下display:flow-root？

前面說到display:flow-root這種方式創(chuàng)建一個(gè)BFC是最沒有副作用的方式，那么這里就介紹一下flow-root這個(gè)display屬性的新取值

1. W3C中怎么描述flow-root

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]

直譯過來就是：該元素生成一個(gè)塊容器框，并使用流布局布置其內(nèi)容。它始終為其內(nèi)容建立新的塊格式化上下文
說明這是SS2新增的專為建立塊格式化上下文的一個(gè)屬性值

2. 兼容性
   兼容性問題，一般都是直接Can I use一把梭，會(huì)發(fā)現(xiàn)，其實(shí)除了firefox和chrome（當(dāng)然還有Opera）對(duì)這個(gè)屬性比較友好外，其他瀏覽器還不太支持
   
   can i use display: flow-root

參考：

1. 塊格式化上下文 in MDN
2. Understanding CSS Layout And The Block Formatting Context
3. Airen的博客 — flow-root