這篇文章給大家分享的是有關(guān)BFC的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是專業(yè)的郊區(qū)網(wǎng)站建設(shè)公司，郊區(qū)接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行郊區(qū)網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于什么是BFC？BFC的深入解析 ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

一、什么是BFC

Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的 Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)。Block formatting context直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。通俗地講，BFC是一個(gè)容器，用于管理塊級(jí)元素。

二、如何創(chuàng)建BFC

• float為 left|right

• overflow為 hidden|auto|scroll

• display為 table-cell|table-caption|inline-block|inline-flex|flex

• position為 absolute|fixed

• 根元素

三、BFC布局規(guī)則：

• 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置(即塊級(jí)元素獨(dú)占一行)。

• BFC的區(qū)域不會(huì)與float box重疊(利用這點(diǎn)可以實(shí)現(xiàn)自適應(yīng)兩欄布局)。

• 內(nèi)部的Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊(margin重疊三個(gè)條件:同屬于一個(gè)BFC;相鄰;塊級(jí)元素)。

• 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。（清除浮動(dòng) haslayout）

• BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

四、 BFC有哪些特性

特性1：BFC會(huì)阻止垂直外邊距折疊

按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直margin的重疊，這個(gè)包括相鄰元素或者嵌套元素，只要他們之間沒(méi)有阻擋（比如邊框、非空內(nèi)容、padding等）就會(huì)發(fā)生margin重疊。

①相鄰兄弟元素margin重疊問(wèn)題

    
ABC
    
abc

上面例中兩個(gè)P元素之間距離本該為200px,然而實(shí)際上只有100px,發(fā)生了margin重疊。遇到這種情形，我們?nèi)绾翁幚恚?br/>只需要在p外面包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC。那么兩個(gè)P便不屬于同一個(gè)BFC，就不會(huì)發(fā)生margin重疊了。

   
ABC
  
    
abc