什麼是BFC？什麼條件下會觸發？應用場景有哪些？

時間 2020-07-17

標籤什麼 bfc 條件下觸發應用場景哪些简体版

原文原文鏈接

1.什麼是BFC？

W3C對BFC的定義以下：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲"visiable"的塊級盒子，都會爲他們的內容建立新的BFC（Block Fromatting Context，即塊級格式上下文）。html

2.觸發條件

一個HTML元素要建立BFC，則知足下列的任意一個或多個條件便可：下列方式會建立塊格式化上下文：bash

根元素()
浮動元素（元素的 float 不是 none）
絕對定位元素（元素的 position 爲 absolute 或 fixed）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display 爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display爲 table、table-row、 table-row-group、table-header-group、table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow 值不爲 visible 的塊元素 -彈性元素（display爲 flex 或 inline-flex元素的直接子元素）網格元素（display爲 grid 或 inline-grid 元素的直接子元素）等等。

3.BFC渲染規則

BFC是一個獨立的容器，外面的元素不會影響裏面的元素
計算BFC高度的時候浮動元素也會參與計算
BFC的區域不會與浮動元素的box重疊
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

4.應用場景

1.防止浮動元素高度塌陷

不適用BFC狀況下，子元素使用浮動，父元素高度會塌陷佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            height: 50px;
            width: 50px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
    </div>
</body>
</html>
複製代碼

將父級元素設爲BFC後

.container {
    overflow: hidden;
}
複製代碼

以上狀況應用規則計算BFC高度的時候浮動元素也會參與計算

2.避免外邊距摺疊

當2個box在同一個BFC容器內，同時使用margin會引發外邊距重合flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="inner">div2</div>
        <div class="inner">div3</div>
    </div>
</body>
</html>
複製代碼

此時將box變爲BFC，增長以下樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            overflow: hidden;
        }
        .inner {
            margin: 10px 0;
            background: green;
            
        }
        .bfc {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner">div1</div>
        <div class="bfc">
            <div class="inner">div2</div>
        </div>
        
        <div class="inner">div3</div>
    </div>
</body>
</html>
複製代碼

以上狀況應用規則 Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

3.自適應兩欄佈局

根據規則BFC的區域不會與浮動元素的box重疊，能夠實現自適應兩欄佈局ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .left{
        width: 500px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
       }
       .right{
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
       }
    </style>
</head>
<body>
   <div class="left"></div>
   <div class="right"></div>
</body>
</html>
複製代碼