css--BFC是什麼，有什麼用，怎麼用？

丶Serendipity丶發表於2022-03-28
CSS

前言

　　作為前端開發人員或者學生，你一定知道BFC這個關鍵詞，但是你是否具體瞭解過什麼是BFC?BFC有什麼用？BFC怎麼用些問題呢?本文就來總結一下相關的知識點，希望對閱讀到的小夥伴在面試、學習、開發中有所幫助。

正文

　　1、什麼是BFC

　　首先來看下下面的程式碼段1：

    <style>
      .wrapDiv {
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }
      .item {
        width: 100px;
        height: 30px;
        border: 1px solid black;
      }
      .otherDiv {
        width: 200px;
        height: 200px;
        border: 1px solid yellow;
      }
    </style>
  </head>
  <body>
    <div class="wrapDiv">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
    <div class="otherDiv">6666</div>
  </body>

　　執行結果如下：

　　為什麼會產生這樣的結果呢？wrapDiv的盒子的子元素為什麼會顯示在otherDiv上面呢，item 子元素為什麼會超出父元素 wrapDiv顯示呢，要想不讓它超出，我們應該怎麼辦呢？帶著這些疑問，我們先來了解一下下面的幾個概念：

　　（1）css 文件流

　　css 文件流中，內聯元素預設從左到右流，遇到阻礙或者寬度不夠自動換行，繼續按照從左到右的方式佈局。塊級元素單獨佔據一行，並按照從上到下的方式佈局。文件流可以分為常規流、浮動流、定位流三種

　　a、常規流：

　　普通的文件流，元素預設的從左往右、從上往下排列；行內元素橫著排列，塊級元素豎著排列；position:static時，盒子的位置在常規流佈局放置；position:relative設定了top/bottom/left/right 時，頁面顯示位置有便宜，但是實際佔用空間還是原來常規流的位置。

　　b、浮動流

　　首先按常規流的位置出現，然後根據設定的左（右）浮動靠左、靠上（靠右、靠上）浮動；浮動會導致常規流元素環繞在它的周邊，因此解決了文字環繞圖片的問題，但是這樣浮動元素會撐大父級元素，從而間接的影響到塊級元素佈局，所以就有了清楚浮動的方法（偽元素、br標籤、clear屬性、overflow: hidden、給父元素設定寬高、給父元素設定浮動等）。

 　　c、定位流

　　這裡主要指絕對定位、元素的具體位置由絕對定位的座標組成，絕對定位的元素從常規流移除們不會影響的其他元素，絕對定位相對於上級元素中最近的一個定位為 relative\ fixed\ absolute 的元素為定位點。

　　（2）BFC

　　BFC是Web頁面 CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。BFC(block formatting context)塊級格式化上下文，它是頁面中的一塊渲染區域，並且有一套屬於自己的渲染規則，它決定了元素如何對齊內容進行佈局，以及與其他元素的關係和相互作用。 當涉及到視覺化佈局的時候，BFC提供了一個環境，HTML元素在這個環境中按照一定規則進行佈局，總之，BFC是一個獨立的佈局環境，BFC內部的元素佈局與外部互不影響

　　2、BFC有什麼用，怎麼觸發

　　BFC塊級格式化上下文，是一個獨立的渲染區域，讓處於 BFC 內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

　　觸發條件：

    1. 根元素，即HTML標籤
    2. 浮動元素：float值為left、right
    3. overflow值不為 visible，為 auto、scroll、hidden
    4. display值為 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
    5. 定位元素：position值為 absolute、fixed

　　注意：display:table 也可以生成 BFC 的原因在於 Table 會預設生成一個匿名的 table-cell，是這個匿名的 table-cell 生成了 BFC。

　　觸發結果：

    1. 屬於同一個 BFC 的兩個相鄰 Box 垂直排列
    2. 屬於同一個 BFC 的兩個相鄰 Box 的 margin 會發生重疊
    3. BFC 中子元素的 margin box 的左邊， 與包含塊 (BFC) border box的左邊相接觸 (子元素 absolute 除外)
    4. BFC 的區域不會與 float 的元素區域重疊
    5. 計算 BFC 的高度時，浮動子元素也參與計算
    6. 文字層不會被浮動層覆蓋，環繞於周圍

　　3、怎麼使用BFC 

　　（1）阻止margin重疊

　　我們來看下如下程式碼段2：

    <style>
      .first {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 30px;
      }
      .second {
        width: 100px;
        height: 100px;
        border: 1px solid green;
        margin: 30px;
      }
    </style>
  <body>
    <div class="first"></div>
    <div class="second"></div>
  </body>

　　執行結果如下：

 　　分析：first 和 second 兩個 div 屬於 html 根標籤下的同一個 BFC 上下文，觸發了第二條效果，同一個 BFC 中的 div 會發生 margin 重疊，因此這裡我們需要將兩個 div 分別設定為獨立的 BFC 上下文，這裡可以在兩個div外層新增一層 wrap 的 div元素，分別產生獨立的 BFC 上下，程式碼段3如下：

    <style>
      .wrap {
        overflow: hidden;
      }
      .first {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        margin: 30px;
      }
      .second {
        width: 100px;
        height: 100px;
        border: 1px solid green;
        margin: 30px;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="first"></div>
    </div>
    <div class="wrap">
      <div class="second"></div>
    </div>

　　結果如下：

　　（2）可以包含浮動元素 —— 清除內部浮動(清除浮動的原理是兩個div都位於同一個 BFC 區域之中)

　　當我們不給父節點設定高度，子節點設定浮動的時候，會發生高度塌陷，這個時候我們就要清楚浮動。如下程式碼段4：

  <style>
    .wrap {
      height: 50px;
      border: 1px solid red;
    }
    .child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
<body>
  <div class="wrap">
    <div class="child">
      我是浮動元素
    </div>
  </div>
</body>

　　執行結果如下：

　　分析：浮動元素超出了父元素設定的高度，這裡需要清除浮動，程式碼段5如下：

  <style>
    .wrap {
      height: 50px;
      border: 1px solid red;
      overflow: hidden;
    }
    .child {
      float: left;
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
<body>
  <div class="wrap">
    <div class="child">
      我是浮動元素
    </div>
  </div>
</body>

　　執行結果如下：

　　（3）自適應兩欄佈局，阻止元素被浮動元素覆蓋

　　我們來看如下的程式碼段6：

    <style>
        .left {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }

        .right {
            height: 200px;
            background: blue;
        }
    </style>
    <body>
        <div class="left">left div</div>
        <div class="right">right div</div>
    </body>

　　執行結果如下：

 　　分析：left 和 right 兩個div屬於同一個 BFC上下文中，觸發了right文字層不會被浮動層覆蓋，環繞於四周的效果，我們要想實現左右兩個盒子寬度自適應，高度不受其他盒子影響，這裡可以設定右邊盒子為單獨的BFC,程式碼段7如下：

    <style>
        .left {
            width: 100px;
            height: 100px;
            float: left;
            background: green;
        }
        .right {
            height: 200px;
            background: blue;
            overflow: hidden;
        }
    </style>
    <body>
        <div class="left">left div</div>
        <div class="right">right div</div>
    </body>

　　執行結果如下：

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

相關文章