BFC深入理解

王陸寬發(fā)布于2019-08-02 10:05 / 733人閱讀

摘要：一直都知道可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。解決方案如下給添加一個(gè)屬性便會(huì)避開(kāi)計(jì)算內(nèi)層元素的高度。但如果高度有具體的值時(shí)，高度超過(guò)時(shí)還是會(huì)被裁剪。

一直都知道overflow可以清除浮動(dòng)，但是卻不知道這背后的原理。查了眾多資料后才發(fā)現(xiàn)有BFC這么個(gè)東西，寫這篇文章一是為了加深記憶，二是為了加深理解。

什么是BFC？
BFC的全稱是Block Formatting Context 塊級(jí)格式化上下文。
一般情況下BFC只存在于根級(jí)元素，但有時(shí)我們?cè)谠O(shè)置某些CSS屬性時(shí)也會(huì)產(chǎn)生BFC。但是前提是必須是塊級(jí)元素。

以下屬性聲明會(huì)產(chǎn)生BFC：
1、float不為none
2、overflow不為visible
3、position不為static和relative
4、display為inline-block table-cell table-caption
5、flex、inline-flex布局

BFC布局規(guī)則
1、內(nèi)部元素會(huì)垂直排列
2、垂直方向的間隔由margin決定，同一個(gè)BFC里同級(jí)別的兩個(gè)元素之間的margin會(huì)產(chǎn)生坍塌
3、元素會(huì)靠在外層元素的左邊或者右邊，float同理
4、BFC不會(huì)與float重疊（absolute,fixed除外）
5、BFC計(jì)算高度時(shí)，float元素的高度也參與計(jì)算
6、BFC是隔離的，它里面元素就算翻江倒海也不會(huì)影響外層，外層的各種變化也不會(huì)影響B(tài)FC。

BFC應(yīng)用

解決margin坍塌

elementA與elementB之間的實(shí)際margin為10px;
在elementB的外層添加一個(gè)div設(shè)置BFC屬性，此時(shí)elementA, elementB的間隔為20px,代碼如下：

解決float覆蓋

以上代碼中，elmentA會(huì)覆蓋到elementB上。
解決方案如下,給elementB添加一個(gè)BFC屬性elementB便會(huì)避開(kāi)elementA：

計(jì)算內(nèi)層float元素的高度。

上述代碼中，wrapper是沒(méi)有高度的，雖然子元素設(shè)置了高度為100px,但是由于子元素是float所以父元素沒(méi)有高度。
解決方案如下,給wrapper添加一個(gè)BFC屬性，這時(shí)wrapper的高度就為子元素的高度：

對(duì)overflow：hidden的額外說(shuō)明

當(dāng)設(shè)置了一個(gè)元素為樣式為：

 overflow：hidden
 height:auto

元素首先會(huì)計(jì)算出自己的高度才知道應(yīng)該裁剪哪一部分，當(dāng)生成BFC時(shí)會(huì)首先計(jì)算里面元素的高度,當(dāng)里面有float元素時(shí)會(huì)計(jì)算float元素的高度，并把float元素的高度加到自身高度中。但如果高度有具體的值時(shí)，float高度超過(guò)時(shí)還是會(huì)被裁剪。

對(duì)position:absolute以及position:fixed的額外說(shuō)明

在本文前面提到過(guò) BFC的區(qū)域不會(huì)和float區(qū)域重疊，但是absolute和fixed布局有例外。absolute和fixed會(huì)覆蓋到float元素上，因?yàn)閍bsolute和fixed已經(jīng)脫離文檔流。