面試官：請說說什麼是BFC？大白話講清楚

BFC究竟是什麼東西

BFC 全稱：Block Formatting Context，名爲 "塊級格式化上下文"。css

W3C官方解釋爲：BFC它決定了元素如何對其內容進行定位，以及與其它元素的關係和相互做用，當涉及到可視化佈局時，Block Formatting Context提供了一個環境，HTML在這個環境中按照必定的規則進行佈局。html

簡單來講就是，BFC是一個徹底獨立的空間（佈局環境），讓空間裏的子元素不會影響到外面的佈局。那麼怎麼使用BFC呢，BFC能夠看作是一個CSS元素屬性前端

怎樣觸發BFC

這裏簡單列舉幾個觸發BFC使用的CSS屬性git

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的規則

BFC就是一個塊級元素，塊級元素會在垂直方向一個接一個的排列
BFC就是頁面中的一個隔離的獨立容器，容器裏的標籤不會影響到外部標籤
垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰的標籤外邊距會發生重疊
計算BFC的高度時，浮動元素也參與計算

BFC解決了什麼問題

1.使用Float脫離文檔流，高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style> .box { margin: 100px; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; } </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
複製代碼

效果：github

能夠看到上面效果給box設置完float結果脫離文檔流，使container高度沒有被撐開，從而背景顏色沒有顏色出來，解決此問題能夠給container觸發BFC，上面咱們所說到的觸發BFC屬性均可以設置。npm

修改代碼markdown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style> .box { margin: 100px; width: 100px; height: 100px; background: red; float: left; } .container { background: #000; display: inline-block; } </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
複製代碼

效果：數據結構

2.Margin邊距重疊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> .box { margin: 10px; width: 100px; height: 100px; background: #000; } </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>
複製代碼

效果：app

能夠看到上面咱們爲兩個盒子的margin外邊距設置的是10px，可結果顯示兩個盒子之間只有10px的距離，這就致使了margin塌陷問題，這時margin邊距的結果爲最大值，而不是合，爲了解決此問題可使用BFC規則（爲元素包裹一個盒子造成一個徹底獨立的空間，作到裏面元素不受外面佈局影響），或者簡單粗暴方法一個設置margin，一個設置padding。ide

修改代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin邊距重疊</title>
    <style> .box { margin: 10px; width: 100px; height: 100px; background: #000; } </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>
</body>
</html>
複製代碼

效果：

3.兩欄佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兩欄佈局</title>
    <style> div { width: 200px; height: 100px; border: 1px solid red; } </style>
</head>
<body>
    <div style="float: left;">
        兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局
    </div>
    <div style="width: 300px;">
        我是蛙人，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭
    </div>
</body>
</html>
複製代碼

效果：

能夠看到上面元素，第二個div元素爲300px寬度，可是被第一個div元素設置Float脫離文檔流給覆蓋上去了，解決此方法咱們能夠把第二個div元素設置爲一個BFC。

修改代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兩欄佈局</title>
    <style> div { width: 200px; height: 100px; border: 1px solid red; } </style>
</head>
<body>
    <div style="float: left;">
        兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局兩欄佈局
    </div>
    <div style="width: 300px;display:flex;">
        我是蛙人，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭，若有幫助請點個贊叭
    </div>
</body>
</html>
複製代碼

效果：

結語

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期好文

《分享15個Webpack實用的插件！！！》

《手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用》

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《帶你輕鬆理解數據結構之Map》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

參考

blog.csdn.net/weixin_4321…

blog.csdn.net/sinat_36422…