BFC 神奇背後的原理

時間  2019-11-07
標籤 bfc 神奇 背後 原理 简体版
原文   原文鏈接

BFC 已是一個耳聽熟聞的詞語了，網上有許多關於 BFC 的文章，介紹瞭如何觸發 BFC 以及 BFC 的一些用處（如清浮動，防止 margin 重疊等）。雖然我知道如何利用 BFC 解決這些問題，但當別人問我 BFC 是什麼，我仍是不能頗有底氣地解釋清楚。因而這兩天仔細閱讀了CSS2.1 spec 和許多文章來全面地理解BFC。 css

1、BFC是什麼？

　　在解釋 BFC 是什麼以前，須要先介紹 Box、Formatting Context的概念。 html

　　Box: CSS佈局的基本單位

　　Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是一個頁面是由不少個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（一個決定如何渲染文檔的容器），所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子： css3

  • block-level box:display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；
  • inline-level box:display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。而且參與 inline formatting context；
  • run-in box: css3 中才有， 這兒先不講了。

　　Formatting context

　　Formatting context 是 W3C CSS2.1 規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。最多見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。 ide

　　CSS2.1 中只有 BFC 和 IFC, CSS3 中還增長了 GFC 和 FFC。 佈局

　　BFC 定義

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

　　BFC佈局規則：

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

2、哪些元素會生成BFC?

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

3、BFC的做用及原理

　　1. 自適應兩欄佈局

　　代碼： spa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

　　頁面：
　　此處輸入圖片的描述 orm

　　根據BFC佈局規則第3條： htm

每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。 對象

　　所以，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。

　　根據BFC佈局規則第四條：

BFC的區域不會與float box重疊。

　　咱們能夠經過經過觸發main生成BFC， 來實現自適應兩欄佈局。

1
2
3
.main {
    overflow: hidden;
}

　　當觸發main生成BFC後，這個新的BFC不會與浮動的aside重疊。所以會根據包含塊的寬度，和aside的寬度，自動變窄。效果以下：

　　此處輸入圖片的描述

　　2. 清除內部浮動

　　代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

　　頁面：
　　此處輸入圖片的描述

　　根據BFC佈局規則第六條：

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

　　爲達到清除內部浮動，咱們能夠觸發par生成BFC，那麼par在計算高度時，par內部的浮動元素child也會參與計算。

　　代碼：

1
2
3
.par {
    overflow: hidden;
}

　　效果以下：
　　此處輸入圖片的描述 

　　3. 防止垂直 margin 重疊

　　代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

　　頁面：
　　此處輸入圖片的描述

　　兩個p之間的距離爲100px，發送了margin重疊。
　　根據BFC佈局規則第二條：

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

　　咱們能夠在p外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個P便不屬於同一個BFC，就不會發生margin重疊了。
　　代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

　　效果以下:
　　此處輸入圖片的描述

總結

　　其實以上的幾個例子都體現了BFC佈局規則第五條：

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

　　由於BFC內部的元素和外部的元素絕對不會互相影響，所以， 當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程