前言

BFC在css的學習中是重要的但不易理解的概念，BFC也牽扯了很多其他問題，如浮動、定位、盒模型等，因此弄懂BFC是很有必要的。本文對BFC進行總結(jié)，希望對你有所幫助。

BFC是什么？

先看看MDN的定義：

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域。

官方文檔的說法很難理解，查閱多方資料后，得到以下的結(jié)論：

BFC(block formatting context)塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套屬于自己的渲染規(guī)則，它決定了元素如何對齊內(nèi)容進行布局，以及與其他元素的關(guān)系和相互作用。 當涉及到可視化布局的時候，BFC提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局

簡短的總結(jié)：BFC是一個獨立的布局環(huán)境，BFC內(nèi)部的元素布局與外部互不影響

BFC的布局規(guī)則

內(nèi)部的Box會在垂直方向一個接著一個地放置。

Box垂直方向上的距離由margin決定。屬于同一個BFC的兩個相鄰的Box的margin會發(fā)生重疊。

每個盒子的左外邊框緊挨著包含塊的左邊框，即使浮動元素也是如此。

BFC的區(qū)域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。

計算BFC的高度時，浮動子元素也參與計算。

如何觸發(fā)BFC？

這里只記錄常用方法，想要了解全部觸發(fā)BFC的方法請點擊此鏈接

BFC可以解決哪些問題？

• 解決浮動元素令父元素高度坍塌的問題

方法：給父元素開啟BFC

原理：計算BFC的高度時，浮動子元素也參與計算

演示：

• 非浮動元素被浮動元素覆蓋

方法：給非浮動元素開啟BFC

原理：BFC的區(qū)域不會與float box重疊

演示：

• 兩欄自適應(yīng)布局

方法：給固定欄設(shè)置固定寬度，給不固定欄開啟BFC。

原理：BFC的區(qū)域不會與float box重疊

演示：

• 外邊距垂直方向重合的問題

方法：給上box或者下box任意一個包裹新的box并開啟BFC

原理：屬于同一個BFC的兩個相鄰的Box的margin會發(fā)生重疊。

演示：

結(jié)語

以上就是本文關(guān)于BFC的全部內(nèi)容，如果有不正確的地方，歡迎大家指正。碼字不易，且贊且珍惜。

參考

BFC官方文檔

總結(jié)

以上是生活随笔為你收集整理的bfc是什么_一次弄懂css的BFC的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。