這篇文章主要介紹“css中BFC有什么作用”，在日常操作中，相信很多人在css中BFC有什么作用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css中BFC有什么作用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

10年積累的網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有邛崍免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

什么是BFC（BlockFormattingContext）

Formattingcontext(格式化上下文)是W3CCSS2.1規(guī)范中的一個(gè)概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。

而BlockFormattingContexts(BFC，塊級(jí)格式化上下文)，就是一個(gè)塊級(jí)元素的渲染顯示規(guī)則。具有BFC特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且BFC具有普通容器所沒有的一些特性。

BFC的布局規(guī)則如下：

  1.內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置；

  2.BFC是頁面上的一個(gè)隔離的獨(dú)立容器；

  3.屬于同一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊；

  4.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

  5.每個(gè)元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此；

  6.BFC的區(qū)域不會(huì)與float重疊；

那么如何觸發(fā)BFC呢？只要元素滿足下面任一條件即可觸發(fā)BFC特性：

body根元素；

浮動(dòng)元素：float不為none的屬性值；

絕對(duì)定位元素：position(absolute、fixed)

display為：inline-block、table-cells、flex

overflow除了visible以外的值(hidden、auto、scroll)

BFC到底有什么用呢？

塊格式化上下文對(duì)于定位與清除浮動(dòng)很重要。定位和清除浮動(dòng)的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。

1、同一個(gè)BFC下外邊距會(huì)發(fā)生折疊

也就是說，兩個(gè)相鄰的普通流中的塊元素垂直方向上的margin會(huì)折疊。