BFC模式詳解

這次帶給大家BFC模式詳解，使用BFC模式的注意事項有哪些，以下就是實戰案例，一起來看一下。

詳解BFC【 block formatting context】

BFC這個東西說常見的話你可能不覺得，但是你一定會常用到，也許你在用的時候也沒想到BFC這東西。那它究竟是什麼呢，我們來一起看一下。

官方給出的BFC解釋是這樣的，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如inline-blocks, table-cells, 和table-captions），以及overflow值不為「visiable」的區塊級盒子，都會為他們的內容建立新的區塊級格式化上下文。

在一個區塊層級格式化上下文裡，盒子從包含區塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。

在區塊層級格式化上下文中，每個盒子的左外邊緣（margin-left）會碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子創建一個新的區塊級格式化上下文。

上面反覆提到了“ block formatting context”，顯而易見BFC就是他們的縮寫，官方還有”inline formatting context“，那也就是說”formatting context「我們需要仔細的看一下是什麼意思，那我們就拆分來看看：

formatting：n，格式化的意思，v，使格式化( format的現在分詞); 規定…的格式（或形狀、大小、比例等）;
context：語境; 上下文; 背景; 環境;

放到一起的意思是“格式化上下文”，它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

最常見的Formatting context有Block fomatting context(簡稱BFC)和Inline formatting context(簡稱IFC)。 CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC.

#Box也是比較重要的一個概念，Box是CSS佈局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個Box(即boxes)組成的。元素的類型和display屬性，決定了這個Box的類型。 不同類型的Box， 會參與不同的Formatting context(一個決定如何渲染文件的容器)，因此Box內的元素會以不同的方式渲染。

例如display屬性值為block, list-item, table的元素，會產生block-level box。並且參與block fomatting context。 inline-level box: display屬性為inline, inline-block, inline-table的元素，會產生inline-level box。並且參與inline formatting context。

那麼我們通俗的理解一下，BFC就是「區塊級格式化上下文」的意思，創建了BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創建BFC， 它規定了內部的Block-level Box如何佈局，並且與這個獨立盒子裡的佈局不受外部影響，當然它也不會影響到外面的元素。

那麼我們來一起看BFC盒子的一些特性：

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

在哪些場景可以用到BFC

#1.解決margin疊加問題

當盒子上下排布，上方盒子margin-bottom:50px;下面的盒子margin-top:50;那麼神奇的事情就發生了，兩個盒子按照疊加來算的話，距離應該是100px，但是我們發現實際上兩個margin值進行了疊加，只剩下50px，那麼這個時候我們就可以觸發BFC模式，給其中一個盒子添加一個父級元素；

2.用於佈局
 

元素的左外邊距會碰到包含區塊容器的做外邊框，就算存在浮動也會如此，那麼我們可以利用這種方式來一個兩列佈局，第一個盒子浮動，第二個盒子margin-left賦值；

3.用於清除浮動，計算BFC高度

我們發現由於裡面兩個子元素浮動的關係，兩個box已經脫離了父元素的包含塊，父元素高度已經塌陷，我們需要讓父元素包含兩個box子元素，這樣計算高度時，兩個浮動子元素就會參與，所以我們要閉合浮動，觸發父元素的BFC，例如overflow:hidden;

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：

css中屬性值繼承如何使用

#css做出打點效果

CSS3的屬性transition、animation、transform

#

以上是BFC模式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！