一篇文章讓你完全明白到底什么是BFC!

本文轉載自查看原文 2021-12-08 11:46 102 CSS/ 前端個人總結小知識點/ HTML/ 面試題/ BFC

最近了解了一下前端面試題，發現有一個名詞經常出現，那就是BFC

BFC是什么呢？

我們好像感覺這是新出的什么東西嗎？怎么突然就闖入我們的世界了？

實則不然，其實呢 BFC 在前端隨處可見，只要你有過接觸，接觸過前端，寫過靜態網頁就已經和它打交道了。

接下來我們一起來看看 BFC是怎么定義的。

定義：

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，
只有 Block-level box 參與，它規定了內部的 Block-level Box 如何布局，並且與這個區域
外部毫不相干。

什么巴拉巴拉一堆，也看不懂。那我們取出來當中有用的部分：

它是一個獨立的渲染區域,其實就是符合某些特征的HTML標簽。

記住這句話並且理解這句話應該就懂得到底什么是BFC了。

接下來BFC有兩條重要的內容：

一、布局規則：

也就是形成BFC的特性 會怎么怎么樣？。。。

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

2、Box 垂直方向的距離由 margin 決定。屬於同一個 BFC 的兩個相鄰 Box 的 margin
會發生重疊
3、每個元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸(對於從左往
右的格式化，否則相反)。即使存在浮動也是如此
4、BFC 的區域不會與 float box 重疊
5、BFC 就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反
之也如此
6、計算 BFC 的高度時，浮動元素也參與計算

二、哪些元素會生成 BFC:

也就是形成BFC的條件。 需要誰誰誰？。。。

1、根元素
2、float 屬性不為 none
3、position 為 absolute 或 fixed
4、display 為 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不為 visible

想理解BFC, 首先我們先看布局規則前兩條:

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

2、Box 垂直方向的距離由 margin 決定。屬於同一個 BFC 的兩個相鄰 Box 的 margin
會發生重疊

第一條就很好理解，就拿最簡單的例子來說明：標准流布局

正如第一條：標准流布局的盒子會上下排列，獨占一行。

而第二條的前半句就是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>標准流布局</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      width: 1200px;
      margin: 20px auto;
    }
    body {
      text-align: center;
    }
    header {
      height: 100px;
      background-color: pink;
    }
    .nav {
      height: 50px;
      background-color: skyblue;
    }
    .main {
      height: 200px;
      background-color: purple;
    }
    footer {
      height: 150px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <header>header</header>
  <nav class="nav container">nav</nav>
  <main class="main container">main</main>
  <footer>footer</footer>
</body>
</html>

后半句就是外邊距塌陷問題

怎么理解呢? 大盒子里面套個小盒子，再給定了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>外邊距塌陷</title>
  <style>
    body {
      background-color: #ccc;
    }

    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 100px;
      overflow: hidden;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <!-- 大盒子套小盒子嘛！ -->
  <div class="father">
    <div class="son"></div>
  </div>
</body>

</html>

正常布局，當我們給了父盒子一個margin-top的值，自然會頂着上面往下走100px，

但此時我們也想讓子盒子在父盒子里面往下走50px，給定子盒子margin-top值並不能實現。

這就是外邊距塌陷，也是第二條后半句屬於同一個 BFC 的兩個相鄰 Box 的 margin
會發生重疊，這也就沒有形成BFC,

那我還是想讓子盒子也在父盒子往下走個50px怎么辦呢？，那么回去看看形成BFC的條件第五條：5、overflow 不為 visible

給父元素 overflow: hidden; 唄！

效果實現。總結一下：

此時這個大的父盒子就形成了BFC,回顧概念它是一個形成BFC的特性第五條應該也能理解

這樣就初步地理解了BFC是什么。

再舉個栗子：

搞張圖片，丟進一個盒子里：

<style>
    .box {
      background-color: #ddd;
    }

    .box img {
      /* 圖片太大刺眼，限制一下大小 */
      height: 200px;
    }
  </style>  


  <div class="box">
    <img src="./屌圖.jpeg" alt="">
  </div>