面試必備 BFC

bfc:面試必問!!!!!(2020-5-19更新於位元組跳動一面面試之後，面試官問了此問題，沒有達到面試官的滿意，所以，再學一遍加深印象)

問題是這樣的：

1.兩個塊，第乙個塊margin-bottom：20px；第二個塊margin-top：20px，問:最後呈現在頁面中兩個塊上下之間的距離為多少？回答:20px;

2.面試官接著問：為什麼會是20px呢？答：瀏覽器載入是自上而下的原理，外邊距上會取最大值

3.面試官接著問：有什麼辦法能讓他呈現40px嗎？當時記不太清楚了，隱隱約約知道這是bfc，解決bfc的四個辦法只記得兩個，就說了position和float可以解決

4.免面試官接著問：position什麼屬性可以i解決呢？我只答了absolute，因為當時真的記不起來了

5.面試官接著問：為什麼absolute可以解決呢？我沒答上來

6.面試官接著問：bfc到底是個什麼東西呢？原理是什麼呢？我沒答上來

最後面試官告訴我說：bfc就是讓元素成為乙個個獨立的塊，他們之間互不影響

（總結一下吧：這次位元組的面試官真的很負責任，會引導你思考問題，在這裡我很感謝他！雖然聊了乙個小時多點，但感覺自己還是涼了。不過沒有關係，九十月份我會再戰的！！！！如果九十月份再不過的話，信仰就破滅了/(ㄒoㄒ)/~~）

接下來步入正題：

你可能見到過這樣乙個情景：

很多網頁都會有廣告的部分，也提供使用者點選關閉的按鈕，這樣的廣告一般都是用bfc建立的，主要是因為點選關閉按鈕以後不能影響整個頁面的布局，比如廣告會經常使用position:absolute,我們就可以給廣告進行任意的定位了，這就是bfc

bfc是塊級格式上下文，它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

具有 bfc 特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在布局上影響到外面的元素，並且 bfc 具有普通容器所沒有的一些特性。

通俗一點來講，可以把 bfc 理解為乙個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。

1.浮動:float:(left、right、inherit)除none以外的值[使用此屬性注意左右距離是否被改變]

2.定位:position(absolute、fixed)

3.display(inline-block、 table-cell 、flex)

4.overflow(hidden、 auto 、scroll)除visible以外的值（如果整個區域有高度，就要小心使用hidden）

5.根元素也是建立bfc的方法

在網頁製作過程中由於瀏覽器載入是自上而下的原因，外邊距上下會取最大值，左右不受影響。

demo1

demo2

從效果上看：這兩div元素都處於同乙個bfc容器下（這裡指body），所以第乙個div的下邊距和第二個div的上邊距發生了重疊，所以兩個盒子之間的距離只有30px而不是50px

那麼接下來就通過觸發bfc來解決這個問題吧。

此處用個box給div2包住，只通過一行**(給box 新增屬性position:absolute)ps:inherit除外

class="demo1"

>demo1

class="box"

class="demo2"

>demo2

頁面效果如下:

解決辦法:觸發bfc(給父元素設定overflow:hidden)ps:inherit除外

醬紫就好啦~

我們都知道，浮動

的元素會脫離文件流，看個例子吧

有乙個母塊寬為300px,有乙個1px的邊框，母塊中有乙個子塊寬100px高80px，且讓子塊左浮動

class="
box">
class="
float
">

頁面效果如下：由於浮動元素脫離文件流，所以容器只剩下了2px的高度，如果觸發bfc，那麼容器就會包裹浮動元素

有乙個大塊，裡面包含了兩個小塊，第乙個小塊左浮動，第二個小塊不做任何浮動

class="

box">

class="

float

class="

right

">我是乙個沒有浮動，沒有觸發bfc的元素.width:200px;

頁面執行效果如上：可以看出第乙個浮動的紅色的塊已經覆蓋住了第二個元素，但是文字內容不會被覆蓋，如果第二個元素觸發bfc（稱為獨立的塊），即第二個元素新增overflow:hidden;就會變成

面試必備 BFC

面試必備面試技巧

前端面試之BFC

synchronized面試必備

面試必備 BFC

面試必備 面試技巧

前端面試之BFC

synchronized面試必備

相關推薦

面試必備面試技巧