前端：對BFC的理解

時間 2020-12-14

標籤 css html ide 佈局 flex spa code orm htm blog 欄目 CSS 简体版

原文原文鏈接

1、BFC是什麼？css

　　定義html

　　　　BFC(Block Formatting Context)塊級格式化上下文，是Web頁面的可視化css渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其餘元素交互的區域。ide

　　它是一個獨立的渲染區域，只有Block-level box 參與，它規定了內部的Block-level box如何佈局，而且與這個區域外部絕不相干。佈局

2、BFC有什麼用？flex

　　BFC的觸發條件spa

　　　　 1.根元素<html>
code

　　　　2.float值非none；orm

　　　　3.overflow值非visible；htm

　　　　4.display值爲inline-block、table-cell、table-caption、flex、inline-flex；blog

　　　　5.position值爲absolute、fixed

　　　 BFC特性

　　　　1.內部的Box會在垂直方向，一個接一個的放置；

　　　　2.BFC的區域不會與浮動容器發生重疊；

　　　　3.計算BFC的高度時，浮動元素也參與計算；

　　　　4.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會重疊；

　　　　5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此；

　　　　6.元素的margin-left與其包含塊的border-left相接觸。

特性1：BFC內的容器在垂直方向依次排列，以下圖：

特性2：BFC的區域不會與浮動容器發生重疊

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             .left{
 8                 width: 100px;
 9                 height: 200px;
10                 background: yellowgreen;
11                 float: left;
12             }
13             .right{
14                 height: 300px;
15                 background: blue;
16             }
17         </style>
18     </head>
19     <body>
20         <div class="left"></div>
21         <div class="right"></div>
22         
23     </body>
24 </html>

現象：
正常狀況下，左側元素.left浮動時，會與右側元素.right發生重疊，不能實現自適應兩欄效果。

緣由：
左側元素浮動，脫離文檔流。

解決方法：
給右側元素.right添加聲明overflow: hidden;，左右側元素重疊消失，實現自適應兩欄效果。

解決緣由：
給右側元素.right添加聲明overflow: hidden;，使得右側元素觸發了BFC（見BFC觸發條件3），而BFC特性規定「BFC的區域不會與浮動容器發生重疊」，從而解決了重疊問題，實現自適應兩欄效果。

特性3：計算BFC高度時浮動元素也參於計算

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .outside{
                border: 10px solid blue;
            }
　　　　　　　.par{
　　　　　　　
　　　　　　　　　　overflow:hidden;
　　　　　　　}
            .inside{
                width: 200px;
                height: 200px;
                background: yellowgreen;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="outside par">
            <div class="inside"></div>
        </div>
    </body>
</html>

現象：
當父元素.outside沒有設置高度且子元素.inside都浮動時，父元素.outside會出現高度塌陷。

緣由：
子元素.inside設置浮動後脫離文檔流，而父元素.outside又沒有設置高度，故父元素.outside會出現高度塌陷。

解決方法：
給父元素.outside添加聲明overflow: hidden;，父元素高度塌陷消失。

解決緣由：
給父元素.outside添加聲明overflow: hidden;，使得父元素.outside觸發了BFC（見BFC觸發條件3），而BFC特性規定「計算BFC高度時浮動元素也參於計算」，此時子元素.inside雖然設置了浮動，但其高度仍計算至父元素內，從而解決了高度塌陷問題。

特性4：屬於同一個BFC的兩個相鄰容器的上下margin會重疊

 1 <!DOCTYPE html>
 2 <html>
 3 　　<head>
 4      <meta charset="utf-8">
 5          <title></title>
 6 　　　　　<style type="text/css">
 7             .top{
 8  width: 200px; 9  height: 200px; 10  background: red; 11 margin-bottom: 40px; 12  } 13  .bottom{ 14  width: 200px; 15  height: 200px; 16  background: blue; 17 margin-top: 60px; 18  } 19 　　　　　　　.box{ 20 　　　　　　　　overflow:hidden; 21 22 　　　　　　} 23 </style> 24 </head> 25 　　　<body> 　　 26 　　　　　　<div class="top"></div> 　　 27 　　　　　　<div class="bottom"></div> 28 　　　　　　<div class="box"> 29 30 　　　　　　　　<div class="bottom"></div> 31 32 　　　　　　</div> 33 　　　</body> 34 </html>

現象：

當給紅色塊下外邊距margin-bottom，給藍色塊上外邊距margin-top時，上下外邊距會發生重疊，兩個色塊的間距解析爲二者中的較大值（60px）。

緣由：

此時紅色塊和藍色塊屬於同一個BFC，即根元素（<html>）。BFC的特性1規定「屬於同一個BFC的兩個相鄰容器的上下margin會重疊」，故二者上下邊距發生重疊

解決方法：

給藍色塊添加父元素.box並添加聲明overflow: hidden;能夠解決紅色塊和藍色塊的上下margin重疊問題。

解決緣由：

　　經過給藍色塊添加父元素.box並添加聲明overflow: hidden;，使得父元素.box觸發了BFC（見BFC觸發條件3），此時紅色塊和藍色塊屬於不一樣的BFC，紅色塊的BFC仍然是根元素（<html>），藍色塊的BFC是父元素.box。即不知足BFC特性1中的規定「屬於同一個BFC······」，從而解決了二者的上下margin重疊問題。