bfc是什麼？
第一次看到這個名詞，我是拒絕的，css什麼時候還有這個東西？於是迫不及待的google了一下，才發現原來它無時無刻不在我們的css當中，只不過它並不是乙個屬性，不需要我們平常使用手寫罷了。但是它的重要性確是槓槓的，可以這麼說，沒有它就就沒有什麼css布局 bfc,全稱 block formatting context，翻譯成塊級格式化上下文，它就是乙個環境，html元素在這個環境中按照一定規則進行布局。乙個環境中的元素不會影響到其它環境中的布局。
看一大堆文字可能有點抽象，現在拿個js函式來比喻說明一下吧，我們現在有乙個叫做bfc的函式，而乙個函式就是乙個塊級作用域，這裡面所有的變數申明、執行都在這個塊級作用域內進行。理所當然，乙個環境中的變數不會影響到其它環境變數。
css code複製內容到剪貼簿
所以，我們是不是可以這樣理解：所謂的bfc就是css屬性的執行域？
bfc的生成
既然js可以通過函式等方法來實現塊級作用域，我想那css肯定也是可以通過一些手段來實現bfc的。
這裡bfc的官方文件寫到：
floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with程式設計客棧 『overflow』 other than 『visible』 (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
從這段描述可以清楚知道，以下方法可以建立乙個新的塊級執行上下文（bfc）：
1.浮動元素、
2.絕對定位元素，
3.塊級元素以及塊級容器(比如inline-block、table-cell、table-capation)
4.overflow值不為visible的塊級盒子
當然，root元素會自動生成乙個bfc，這個應該很好理解,畢竟需要乙個根b程式設計客棧fc來布局
執行規則
既然存在了執行環境，那肯定會存在執行規則。bfc的
1.在乙個塊級排版上下文中，盒子是從包含塊頂www.cppcns.com部開始，垂直的乙個接乙個的排列的。每個盒子的左外邊是觸碰到包含塊的左邊的（對於從右向左的排版，則相反）
這個應該不難理解。就是我們如果在裡寫幾個
，它會依次垂直排列，並且都是在頁面的最左邊（對於從右向左的排版，則相反）。
2.相鄰兩個盒子之間的垂直的間距是被margin屬性所決定的，在乙個塊級排版上下文中相鄰的兩個塊級盒之間的垂直margin是摺疊的。
這句描述是不是超級熟悉，這不是我css常見的邊距摺疊問題嗎？現在知道它出自**了吧，就是這裡。下面的倆個盒子各有上下20px的間距，加起來應該有40px,但顯然，現在只有20px;
css code複製內容到剪貼簿
發生邊距摺疊是因為同乙個bfc的關係(根bfc)。既然知道原因，解決就好辦了，讓他們倆個不在同乙個bfc就ok啦。
3. bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
通過這條屬性，我們又可以想到哪些呢。對，浮動元素的塌陷問題。我們知道，乙個元素中的子元素浮動了，這個父元素就會發生高度塌陷問題。下例中一旦內部的紅色元素浮動，藍色的盒子就無法被撐起，高度會變成0。
css 程式設計客棧code複製內容到剪貼簿
現在我們知道了，這是因為浮動元素建立了乙個新的bfc，成為了乙個獨立的容器，不會影響到外面的父元素了。它的定位規則不再受制於這個父元素了。如何解決這一問題？我們知道只要在在父元素加上overflow:hidden可以清除浮動。但是這又是為什麼？
其實，這就是前面提到的overflow:hidden可以生成乙個新的bfc，而這個浮動的子元素，被它所包含了，從而成為乙個獨立容器，它的float外溢不了了，外面的元素不再受其浮動的影響，從而達到了清除浮動的作用。
本文標題: css布局基礎bfc
本文位址:
前端css布局之BFC
哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...
CSS布局之BFC和IFC
這是一篇css2 3的布局規則0.000001覽 bfc block formatting context 塊級格式上下文 塊級元素 block level elements display block list item table flex 塊級盒 block level boxes 塊級盒是指...
CSS基礎布局
一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子，這個盒子的寬和高，外加內邊距 邊框粗細和外邊距這些東西，決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型，padding 2px，border ...