2024-05-10 BFC是什麼

技术开发-陈伟健發表於2024-05-10

BFC(Block Formatting Context)即塊級格式化上下文,是W3C CSS2.1規範中的一個概念。它指的是瀏覽器中建立的一個獨立的渲染區域,並且擁有一套渲染規則,決定了其子元素如何定位,以及與其他元素的相互關係和作用。

BFC是一個完全獨立的空間(佈局環境),讓空間裡的子元素不會影響到外面的佈局,反之亦然。BFC的佈局規則是:內部的Box會在垂直方向,一個接一個地放置,Box垂直方向的距離由margin決定。

此外,BFC在頁面上表現為一個隔離的獨立容器,容器內的子元素不會影響到外面的元素。在計算BFC的高度時,浮動元素也會參與計算。

相關文章