首頁 > 文章 > web前端 > 什麼是區塊級格式化上下文？建立區塊級格式化上下文的作用（附程式碼）

什麼是區塊級格式化上下文？建立區塊級格式化上下文的作用（附程式碼）

不言原創: 2018-08-06 09:55:182553瀏覽

(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>

解析：給這兩個子p加浮動，浮動的結果，如果沒有清除浮動的話，父p不會將下面兩個p包裹，但還是在父p的範圍之內，左浮是子p的左邊接觸父p的borderbox的左邊，右浮是子p接觸父p的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重疊，因此會根據包含區塊（父p）的寬度，和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：可以包含浮動元素－清除內部浮動

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

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

當兩個相鄰區塊級子元素分屬於不同的BFC時可以阻止margin重疊
操作方法：給其中一個p外麵包一個p，然後透過觸發外面這個p的BFC，就可以阻止這兩個p的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属性。
        }

什麼是區塊級格式化上下文？建立區塊級格式化上下文的作用（附程式碼）

相關文章