淺析BFC佈局的概念以及做用

BFC的概念以及做用

BFC的定義：

(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

咱們常說的文檔流其實分爲==定位流、浮動流和普通流==三種。而普通流其實就是指BFC中的FC。
FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其餘元素之間的關係和做用。

通俗一點的方式解釋:

BFC 能夠簡單的理解爲某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。

BFC的觸發條件

==知足下列條件之一就可觸發BFC==

• 【1】根元素，即HTML元素

• 【2】float的值不爲none
• 【3】overflow的值不爲visible
• 【4】display的值爲inline-block、table-cell、table-caption

• 【5】position的值爲absolute或fixed

  BFC佈局規則：

  • 1.內部的Box會在垂直方向，一個接一個地放置。

• 2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 3.每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• 4.BFC的區域不會與float box重疊。
• 5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

• 6.計算BFC的高度時，浮動元素也參與計算

BFC佈局規則1：內部的Box會在垂直方向，一個接一個地放置。

咱們日常說的盒子是由margin、border、padding、content組成的，實際上每種類型的四條邊定義了一個盒子，分別是分別是content box、padding box、border box、margin box，這四種類型的盒子一直存在，即便他們的值爲0.決定塊盒在包含塊中與相鄰塊盒的垂直間距的即是margin-box。

BFC佈局規則2：Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。

決定塊盒在包含塊中與相鄰塊盒的垂直間距的即是margin-box

BFC佈局規則3：每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

<div class="parent">
    <div class="child"></div>
    //給這兩個子div加浮動，浮動的結果，若是沒有清除浮動的話，父div不會將下面兩個div包裹，但仍是在父div的範圍以內。
    <div class="child"></div>
</div>

解析：給這兩個子div加浮動，浮動的結果，若是沒有清除浮動的話，父div不會將下面兩個div包裹，但仍是在父div的範圍以內，左浮是子div的左邊接觸父div的borderbox的左邊，右浮是子div接觸父div的borderbox右邊，除非設置margin來撐開距離，不然一直是這個規則。

BFC佈局規則4：BFC的區域不會與float box重疊：

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代碼-->
 .aside {
            width: 100px;
            height: 150px;
            float: left;
            background: #f66;
        }
  .main {
            height: 200px;
            overflow: hidden;//觸發main盒子的BFC
            background: #fcc;
        }
  .text{
            width: 500px;
    }

上面aside盒子有一個浮動屬性，覆蓋了main盒子的內容，main盒子沒有清除aside盒子的浮動。只作了一個動做，就是觸發自身的BFC，而後就再也不被aside盒子覆蓋了。因此：BFC的區域不會與float box重疊。

BFC有哪些做用：

• 1.自適應兩欄佈局

• 2.能夠阻止元素被浮動元素覆蓋
• 3.能夠包含浮動元素——清除內部浮動

• 4.分屬於不一樣的BFC時能夠阻止margin重疊

  BFC做用1：自適應兩欄佈局

  仍是上面的代碼，此時BFC的區域不會與float box重疊，所以會根據包含塊（父div）的寬度，和aside的寬度，自適應寬度。

  BFC 與 Layout

  IE 做爲瀏覽器中的奇葩，固然不可能循序漸進的支持 BFC 標準，因而乎 IE 中有了 Layout 這個東西。Layout 和 BFC 基本是等價的，爲了處理 IE 的兼容性，在須要觸發 BFC 時，咱們除了須要用觸發條件中的 CSS 屬性來觸發 BFC，還須要針對 IE 瀏覽器使用 zoom: 1 來觸發 IE 瀏覽器的 Layout。

.parent {
            margin-top: 3rem;
            border: 5px solid #fcc;
            width: 300px;
        }
.child {
            border: 5px solid #f66;
            width:100px;
            height: 100px;
            float: left;
        }

BFC做用3：能夠包含浮動元素——清除內部浮動

給父divparent加上 overflow: hidden;
清除浮動原理：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域以內，此時已成功清除浮動.
還能夠向同一個方向浮動來達到清除浮動的目的，清除浮動的原理是兩個div都位於同一個浮動的BFC區域之中

BFC的做用4：阻止margin重疊:

當兩個相鄰塊級子元素分屬於不一樣的BFC時能夠阻止margin重疊
操做方法：給其中一個div外面包一個div，而後經過觸發外面這個div的BFC，就能夠阻止這兩個div的margin重疊

<div class="aside"></div>
<div class="text">
    <div class="main"></div>
</div>
<!--下面是css代碼-->
 .aside {
            margin-bottom: 100px;//margin屬性
            width: 100px;
            height: 150px;
            background: #f66;
        }
        .main {
            margin-top: 100px;//margin屬性
            height: 200px;
            background: #fcc;
        }
         .text{
            /*盒子main的外面包一個div，經過改變此div的屬性使兩個盒子分屬於兩個不一樣的BFC，以此來阻止margin重疊*/
            overflow: hidden;//此時已經觸發了BFC屬性。
        }