BFC淺析

BFC到底使什麼？

BFC概括：可以在心中記住這麼一個概念———所謂的BFC就是css布局的一個概念，是一塊區域，一個環境。

BFC布局規則

關于這些不同 box，下文會解釋，别慌~

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

哪些元素會生成BFC?

• 根元素
• float屬性不為none
• position為absolute或fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible

BFC的定義

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，隻有Block-level box參與（在下面有解釋）， 它規定了内部的Block-level Box如何布局，并且與這個區域外部毫不相幹

什麼是 塊級盒 Block-level box

塊級盒block-level box是這種參與了塊級排版上下文（BFC）的一種盒子，每個塊級元素都生成了一個包含後代盒子和生成的内容的主要塊級盒，并且這個盒子參與了任何定位的計算。塊級元素會自動生成一個塊級盒block-level box，這是塊級盒block-level-box的盒模型構成，它表明的是塊級盒自身的結構構成

margin、border、padding、content分别定義了元素四種邊，然後每種類型的邊的四條邊定義了一個盒子，分别是content box、padding box、border box、margin box，而決定塊盒在包含塊中與相鄰塊盒的垂直間距的便是margin-box，這個margin-box是始終存在的，即使它的margin為0。

margin-box是參與塊級盒在上下文中的布局（在BFC裡面）的，但是參與BFC布局（很多BFC環境組成）的盒子卻是塊級盒block-level box，并且還有一點需要明确的是參與布局的是盒子而不是元素本身。

什麼是 包含塊 containing block

元素盒子的位置和尺寸往往是根據一個矩形計算出來的，我們稱這個矩形為元素的包含塊，如果這個元素的position值是relative或static，這個元素的包含塊是由離其最近的塊級的祖先盒子的内容的邊content-edge構成的。就是離其最近的塊級祖先盒子的content-box。

BFC的作用

BFC作用就是其定義和其布局規則所造成的

解決margin重疊

首先想一想為什麼會重疊？

因為，根據布局規則第2條，塊級盒(Block-level box)它們在同一BFC下呀。

怎麼解決？

自然是讓塊級盒不在同一BFC下不就行了！

html

<div class="container">   //不在同一BFC下
        <div class="div1"></div>
    </div>
<div class="div2"></div>
           

css

.container {
        border:1px solid black;
    }
    .div1 {
        background-color: aqua;
        width: 100px;
        height: 100px;
        margin-bottom: 10px;  //*
    }

    .div2 {
        background-color: red;
        width: 100px;
        height: 100px;
        margin-top: 10px; //*
    }
           

清除内部浮動

為什麼可以清除浮動呢？還是因為BFC的布局規則6——計算BFC的高度時，浮動元素也參與計算。

浮動不是會引起高度坍塌嗎？那是因為float會脫離正常的文檔流。包含它的元素計算高度時就不會帶上它。

那形成一個BFC，計算高度時又會帶上它了。這也是

.container {
        border:1px solid black;
        overflow: hidden;   //生成BFC環境
    }
    .div1 {
        background-color: aqua;
        width: 100px;
        height: 100px;
        float: left;
    }
 <div class="container">
        <div class="div1"></div>
 </div>
           

參考：

http://web.jobbole.com/84808/

https://juejin.im/post/5909db2fda2f60005d2093db