BFC(格式化上下文)

2022-05-07 13:57:18 字數 401 閱讀 9553

什麼是bfc?

bfc格式化上下文,它是乙個獨立的渲染區域,讓處於 bfc 內部的元素和外部的元素相互隔離,使內外元素的定位不會相互影響

如何產生bfc?

display: inline-block

position: absolute/fixed

bfc作用

bfc最大的乙個作用就是:在頁面上有乙個獨立隔離容器,容器內的元素和容器外的元素布局不會相互影響

解決上外邊距重疊;重疊的兩個box都開啟bfc;

解決浮動引起高度塌陷;容器盒子開啟bfc

解決文字環繞;左邊div,右邊文字容器p,將p容器開啟bfc

塊格式化上下文 BFC

塊格式化上下文 block formatting context,bfc 是web頁面的可視css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。塊格式化上下文包含建立它的元素內部的所有內容.塊格式化上下文對浮動定位 參見float 與清除浮動 參見clear 都很重要...

BFC 塊狀格式化上下文

mdn對bfc的定義 是web頁面的視覺化css渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素互動的區域。bfc是乙個獨立的渲染空間,只有塊級元素參與,規定了內部元素如何布局,並且與這個區域外部的元素不相干。觸發bfc 布局規則 bfc可以做什麼呢?包含浮動,清除父元素高度塌陷問...

塊級格式化上下文(BFC)

最近遇到乙個專業的名詞,不是很懂,所以了解了一下,並總結歸納一下。首先清楚我們的問題是什麼?bfc是什麼?怎麼建立?什麼情況下建立?有什麼特性和作用?bfc 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1,浮動元素,float 除 none 以外的值 2,絕對定位元素,p...