1.bfc的定義:bfc(block formatting context,中文常譯為塊級格式化上下文)是w3c css 2.1 規範中的乙個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。在進行盒子元素布局的時候，bfc 提供了乙個環境，在這個環境中按照一定規則進行布局不會影響到其它環境中的布局。比如浮動元素會形成 bfc，浮動元素內部子素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。
2.形成bfc的條件(符合以下任一條件即可):
(1).float的值不為none。
(2).overflow的值不為visible。
(3).display的值為table-cell, table-caption, inline-block中的任何乙個。
(4).position的值不為relative和static。
3. bfc 常見作用
(1).bfc會根據子元素的情況自適應高度 ，這個特性是對父元素使用overflow:hidden/auto/scroll、float:left/right 樣式可以閉合浮動的原理。
例:我的父元素是 bfc
該div 使用overflow: hidden建立了bfc ，可以包含浮動元素，因此能正確表現出高度，其邊框位置也是正常的。
我的父元素不是 bfc
該div 出現了「高度塌陷」，這是因為內部的浮動元素脫離了普通流，因此該div相當於乙個空標籤，沒有高度和寬度，即高度為 0，上下邊框也重疊在一起。
(2).阻止父子元素的 margin 摺疊--------------------經常遇見，重點關注！
即便兩個塊級元素相鄰，但當它們不在同乙個塊級格式化上下文時它們的邊距也不會摺疊。
例:我的上外邊距是 20px，父級元素不是 bfc
--------------overflow:auto;是關鍵
我的上外邊距是 20px，父級元素是 bfc
上述 div 元素都有頂部外邊距，但第二個div的邊距沒有與它的子元素的外邊距摺疊。這是因為第二個div建立了新的bfc。
(3).不被浮動元素覆蓋
浮動元素會無視兄弟元素的存在，覆蓋在兄弟元素的上面，為該兄弟元素建立bfc 後可以阻止這種情況的出現。
例:我是浮動元素
我是非浮動元素，並且沒有建立 bfc
我是浮動元素
我是非浮動元素，建立了 bfc
藍色背景的元素通過 display:inline-block 建立了 bfc，則浮動的兄弟元素就不覆蓋在該元素上面了。(個人覺得clear可以達到同樣效果)
以上就是一些對bfc的認識和看法，感覺學得越多，不懂的越多--！慢慢來吧。
css定位 規則
絕對定位 固定定位 定位下的居中 多個定位元素重疊時z index 補充 規則 定位 手動控制元素在包含塊中的精準位置 預設值 static，靜態定位 不定位 relative 相對定位 乙個元素，只要position的取值不是static，認為該元素是乙個定位元素 定位元素會脫離文件流 相對定位除...
前端css布局之BFC
哈嘍，各位小夥伴好！今天來整理下前端關於css布局的乙個知識點 bfc block fomatting context 如果知識點梳理有出錯的地方，望夥伴們幫忙指出，一起進步 bfc 可以理解為建立乙個布局容器，容器裡按自己的方式來布局，且與容器外界的元素互不影響。wrap fl div 這是div...
什麼是BFC規則？
block formatting context 塊級格式化上下文 塊級元素的渲染區域規則 bfc盒子 外部不影響內部 內部不影響外部 1.float不為none 2.position屬性為absolute和fixed 3.oveflow不為visiable 4.html 根標籤1.bfc盒子內部的...