BFC塊級格式

2022-07-22 03:54:18 字數 501 閱讀 6039

bfc塊級格式上下文,獨立的乙個渲染區域

1、同乙個bfc的兩個相鄰盒子間的margin會重疊(垂直方向);

2、bfc內部的盒子在垂直方向上會乙個接乙個的放置;

3、每個子元素的左外邊距與包含塊的左邊界相接觸;

4、計算bfc的高度時,浮動子元素也參與計算;

5、bfc內部的子元素不會受到外面元素的影響;

6、bfc的區域不會與float的元素區域重疊;

觸發bfc條件:

float:不為none;

overflow的值不為visible;

display:inline-block,table-cell,table-caption;

position:不為relative 和 static

哪些元素會產生bfc

如果乙個浮動元素後面緊跟乙個非浮動的元素,那麼就會有乙個覆蓋的物件,這時可對後面非浮動元素設定overflow:hidden觸發bfc,或者設定padding-left:浮動元素的寬度

BFC 塊級格式上下文

url url 上文已經將的很詳細了,大家可以看看!這裡提另外乙個相關問題 url 我在這篇文章中找到了答案 問題是 有時候我們調子元素的margin top,是想和父元素拉開距離,可事實是和父元素沒拉開距離,反而是父元素與上面拉開了距離,感覺子元素的設定在父元素上起作用,為什麼呢?這是css2.1...

BFC塊級格式上下文

bfc是什麼 bfc block formatting context 塊級格式上下文,是乙個css的布局概念,是頁面視覺化css渲染的一部分,是塊盒子的布局過程發生的區域。bfc的觸發條件 1.浮動元素 元素的float不是none 2.絕對定位元素 元素的position為absolute或fl...

塊級格式化上下文(BFC)

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