你可能不知道的BFC在實際中的應用

2022-03-04 11:35:23 字數 2073 閱讀 4818

bfc是塊級格式化上下文,它的乙個令人熟知的運用是雙飛翼布局或者兩列布局。但其實它在其它地方也有很巧妙的運用。我把研究的心得記錄下來,供以後開發時參考,相信對其他人也有用。

參考資料:

mdn塊格式化上下文

為什麼bfc可以解決margin疊加問題?

bfc——乙個我們容易忽視掉的布局神器

觸發bfc的元素會變成乙個獨立的盒子,這個獨立盒子裡的布局不受外部影響也不會影響到外面的元素!這就是bfc的精髓所在!

常用的觸發bfc的方法:

設定除 float:none 以外的屬性值(如:left | right)。

設定除 overflow: visible 以外的屬性值(如: hidden | auto | scroll)。

設定 display屬性值為: inline-block。

設定 position 屬性值為:absolute | fixed。

如下面的**所示:

兩個塊級元素div1和div2會發生上下邊距重疊的情況。但是如果我們把div的display改為inline-block,就不會發生上下邊距重疊了。**如下所示:

其實嚴格說來,並不是由於display: inline-block;觸發了bfc從而使上下邊距不疊加的,因為bfc的精髓是:觸發bfc的元素會變成乙個獨立的盒子,這個獨立盒子裡的布局不受外部影響,也不會影響到外面的元素!而div1的margin-bottom不能算是盒子內部的布局

那是什麼原因導致上下邊距不疊加的?

因為w3c官方文件規定,上下邊距疊加必須滿足2個條件:乙個是都是塊級元素;另乙個是都在同乙個bfc裡面。參見:w3.org關於margin合併的規範說明

所以我們把div1設定為inline-block之後,它就不是塊級元素了,不滿足條件1,自然就不會發生上下邊距疊加。

我們給父元素的第乙個子元素設定margin-top值,就會發現它影響到了父元素的margin值,原因是它和父元素的margin-top值合併了。例項如下:

我們一般是通過設定父元素的padding-top值為1px來解決的。但是利用bfc有更加簡便的解決方法,那就是利用overflow: hidden或者overflow: auto,使父元素形成乙個bfc,從而它裡面的元素不受外面的元素影響,也不會影響外面的元素。例項如下:

如下面**所示,如果我們給子元素加乙個浮動,那麼子元素就不能撐開父元素了。

原因是,子元素通過float觸發bfc,成為了乙個獨立的盒子,根據bfc的精髓,它不會影響外部元素,也不會受外部元素影響,所以它不會影響父元素的高度,所以不能撐開父元素

這個時候,如果給父元素觸發bfc,就可以強制把子元素拉到它形成的獨立盒子裡面(在計算bfc的高度時,浮動元素也參與計算),這樣就清除浮動了。而觸發bfc最好用的還是overflow: hidden或者overflow: auto。例項如下:

我們在寫css的時候,有時會遇到莫名其妙的問題,這個時候可以考慮給元素加乙個overflow: hidden或者overflow: auto,使元素觸發bfc成為獨立盒子,往往能意想不到的解決問題呢!

你可能不知道的東西

元素可以分為塊級元素,行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果,margin top margin bottom padding top padding bot...

你可能不知道的const

眾所周知,使用 const 宣告的變數必須同時初始化為某個值。一經宣告,在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...

你可能不知道的python logging機制

先來看幾個例子,先想一下執行結果,答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...