BFC?

ps:一開始看到這名詞的時候我心里是拒絕的，什么鬼？

概念

(Block formatting context)直譯為格式化上下文，它是一個獨立的渲染區(qū)域。

布局規(guī)則

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

那些元素會形成BFC

1. 根元素;
2. float屬性部位none;
3. position為absolute和fixed；
4. display為inline-block, table-cell, table-caption, flex, inline-flex;
5. overflow不為visible;

有啥子用？

1. 清除浮動；

<div class="container">
    <div class="item"></div>
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    border: 3px solid #f66;
    height: 200px;
    width: 100px;
    float: left;
  }
</style>

浮動.jpg

若是用的float特性的話，很經(jīng)常遇到這種撐不起父級高度的情況，這是可以用根據(jù)BFC的特性來解決它（6. 計算BFC的高度時，浮動元素也參與計算）：

.container {
    border: 5px solid #fcc;
    overflow: hidden;
  }

浮動2

2. margin重疊

  <div class="container">
    <p class="item"></p>
    <p class="item"></p>
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }
  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }
</style>

20px

設(shè)置div的邊距為20px的則兩個div垂直距離應該為40px;這個時候就發(fā)生了邊距重疊了；(Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊)

讓我們用BFC來解決他：

  <div class="container">
    <p class="item"></p>
    <div class="item-container">
      <p class="item"></p>
    </div>  
  </div>

<style>
  .container {
    border: 5px solid #fcc;
  }

  .item {
    height: 200px;
    width: 100px;
    margin: 20px;
    overflow: hidden;
    background: #fcc;
  }

  .item-container {
    overflow: hidden;
  }
</style>

此時我們用了div來單獨把一個p給獨立出來并且觸發(fā)div的BFC，此時的兩個p元素不在同一個BFC中也就防止了p元素之間的margin重疊；

記住BFC是一個隔離獨立容器和他的特性，容器內(nèi)的子元素不會影響到外面的元素。