css布局之BFC模式的示例分析

這篇文章主要為大家展示了“css布局之BFC模式的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css布局之BFC模式的示例分析”這篇文章吧。

詳解BFC【 block formatting context】

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

官方給出的BFC解釋是這樣的，浮動(dòng)元素和絕對(duì)定位元素，非塊級(jí)盒子的塊級(jí)容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級(jí)盒子，都會(huì)為他們的內(nèi)容創(chuàng)建新的塊級(jí)格式化上下文。

在一個(gè)塊級(jí)格式化上下文里，盒子從包含塊的頂端開始垂直地一個(gè)接一個(gè)地排列，兩個(gè)盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個(gè)相鄰的塊級(jí)盒子的垂直外邊距會(huì)發(fā)生疊加。

在塊級(jí)格式化上下文中，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動(dòng)也是如此，除非這個(gè)盒子創(chuàng)建一個(gè)新的塊級(jí)格式化上下文。

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

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

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

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

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

例如display屬性值為block, list-item, table的元素，會(huì)生成block-level box。并且參與block fomatting context。 inline-level box: display屬性為inline, inline-block, inline-table的元素，會(huì)生成inline-level box。并且參與inline formatting context。

那么我們通俗的理解一下，BFC就是“塊級(jí)格式化上下文”的意思，創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，不過只有Block-level box可以參與創(chuàng)建BFC， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響，當(dāng)然它也不會(huì)影響到外面的元素。

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

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

在哪些場(chǎng)景可以用到BFC

1.解決margin疊加問題

當(dāng)盒子上下排布，上方盒子margin-bottom:50px;下面的盒子margin-top:50;那么神奇的事情就發(fā)生了，兩個(gè)盒子按照疊加來算的話，距離應(yīng)該是100px，但是我們發(fā)現(xiàn)實(shí)際上兩個(gè)margin值進(jìn)行了疊加，只剩下50px，那么這個(gè)時(shí)候我們就可以觸發(fā)BFC模式，給其中一個(gè)盒子添加一個(gè)父級(jí)元素；

2.用于布局
 

元素的左外邊距會(huì)觸碰到包含塊容器的做外邊框，就算存在浮動(dòng)也會(huì)如此，那么我們可以利用這種方式來一個(gè)兩列布局，第一個(gè)盒子浮動(dòng)，第二個(gè)盒子margin-left賦值；

3.用于清除浮動(dòng)，計(jì)算BFC高度

我們發(fā)現(xiàn)由于里面兩個(gè)子元素浮動(dòng)的關(guān)系，兩個(gè)box已經(jīng)脫離了父元素的包含塊，父元素高度已經(jīng)塌陷，我們需要讓父元素包含兩個(gè)box子元素，這樣計(jì)算高度時(shí)，兩個(gè)浮動(dòng)子元素就會(huì)參與，所以我們要閉合浮動(dòng)，觸發(fā)父元素的BFC，例如overflow:hidden;

以上是“css布局之BFC模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！