BFC的概念與應用場景

binbin愛學習發表於2019-01-05

什麼是BFC

BFC(Block formatting context)直譯為"塊級格式化上下文"。它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。 簡單來說，BFC就是用來格式化塊級盒子的。

通俗一點的方式解釋:
BFC 可以簡單的理解為某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。
參考：[佈局概念] 關於CSS-BFC深入理解

如何觸發BFC

滿足下列條件之一就可觸發BFC

  • 根元素，即HTML元素
  • float的值不為none
  • overflow的值不為visible
  • display的值為inline-block、table-cell、table-caption
  • position的值為absolute或fixed

BFC的使用場景

浮動

先了解一下常見的浮動情況

  • 正常情況下的顯示
<style>
    #test1{
        height: 100px;
        width: 100px;
        background-color: red;
    }
    #test2{
        height: 120px;
        width: 120px;
        background-color: blue;
    }
</style>

<div id="root">
    <div id="test1"></div>
    <div id="test2"></div>
</div>
複製程式碼

BFC的概念與應用場景

因為兩個都是塊級元素，各自佔滿一行
如果設定了盒子的寬度，剩下的就是來補滿。如果沒有設定盒子寬度，盒子將佔滿一行。

<style>
    #root{
            border: 2px solid black;
            overflow: hidden;
        }
    #test1{
            height: 100px;
            background-color: red;        
        }
</style>

<div id="root">
        <div id="test1"></div>
</div>
複製程式碼

BFC的概念與應用場景

BFC的概念與應用場景
可以看到，剩下的都是margin

  • 浮動情況下的顯示
<style>
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #test2{
            height: 120px;
            width: 120px;
            background-color: blue;
        }
</style>

<div id="root">
        <div id="test1"></div>
        <div id="test2"></div>
</div>
複製程式碼

BFC的概念與應用場景

紅色塊浮動，脫離了文件流，上升到了浮動流(浮動流的頂部是文件流中元素的底部)。因為當前文件流沒有內容了，藍色塊就成為了文件流第一個內容，取代了原來紅色塊的位置。

如果改一下相對位置

<div id="root">
        <div id="test1"></div>
        <div id="test2"></div>
</div>
複製程式碼

BFC的概念與應用場景

雖然浮動，但是上面被文件流中的藍色塊頂住了

避免覆蓋

只要將藍色塊設定為BFC，那麼就不會被紅色塊覆蓋了

BFC的區域不會與float box重疊

<style>
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #test2{
            height: 120px;
            width: 120px;
            background-color: blue;
            overflow: hidden;
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
        <div id="test2"></div>
    </div>
複製程式碼

BFC的概念與應用場景

清除浮動

<style>
        #root{
            border: 2px solid black;
        }
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
    </div>
複製程式碼

BFC的概念與應用場景

父元素在計算高度的時候，不會計算浮動流的元素，所以父元素沒有被子元素撐開。只要為父元素設定BFC即可。

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

<style>
        #root{
            border: 2px solid black;
            overflow: hidden;
        }
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
    </div>
複製程式碼

BFC的概念與應用場景

避免margin重疊

<style>
        #root{
            border: 2px solid black;
            overflow: hidden;
        }
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            margin: 50px;
            
        }
        #test2{
            height: 100px;
            width: 100px;
            background-color: blue;
            margin: 50px;
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
        <div id="test2"></div>
    </div>
複製程式碼

BFC的概念與應用場景

紅色塊和藍色塊四周的margin都是50px，但是它們接壤的部分，也只是50px，我們只要讓它們屬於不同的BFC即可。(注意：直接為它們設定BFC是無效的)

屬於同一個BFC的兩個相鄰Box的margin會發生重疊

<style>
        #root{
            border: 2px solid black;
        }
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            margin: 50px;
        }
        #test2{
            height: 100px;
            width: 100px;
            background-color: blue;
            margin: 50px;
        }
    </style>
    
    <div id="root">
        <div style="overflow:hidden">
            <div id="test1"></div>
        </div>
        <div style="overflow:hidden">
            <div id="test2"></div>
        </div>
    </div>
複製程式碼

BFC的概念與應用場景

兩欄自適應

如果想實現左邊定寬，右邊自適應的佈局，可以使用BFC

BFC的區域不會與float box重疊

BFC不會和浮動元素重疊，所以只要右邊是BFC，且沒有設定寬度即可。因為它會在不和浮動元素重疊的情況下，佔滿一行

<style>
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #test2{
            height: 100px;
            background-color: blue;
            margin: 50px;
            overflow: hidden;
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
        <div id="test2"></div>
    </div>
複製程式碼

BFC的概念與應用場景

BFC的概念與應用場景

三欄自適應

<style>
       
        #test1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        #test2{
            height: 100px;
            background-color: blue;
            margin: 50px;
            overflow: hidden;
        }
        #test3{
            height: 100px;
            width: 100px;
            background-color: green;
            float: right; 
        }
    </style>
    
    <div id="root">
        <div id="test1"></div>
        <div id="test3"></div>
        <div id="test2"></div>
        
    </div>
複製程式碼

BFC的概念與應用場景

因為上面也說了，如果浮動元素寫在藍色塊下面的話，會被藍色元素頂下去。所以紅色和綠色元素都寫在藍色塊上面。 它們往兩邊浮動之後，藍色塊就是當前文件流第一個元素，會在保持不和兩邊重疊的前提下，佔滿一行。

相關文章