BFC原理

1、BFC定義

一、 box
box是css佈局的基本單位，元素的類型和display屬性決定了box的類型。不一樣的類型的盒子會參與不一樣的formatting context。

block-level box :display屬性爲block、list-item(做爲列表顯示的元素)、table的元素會生成block-level box。

二、formatting context
它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用

• BFC（block formatting context）爲塊級格式化上下文，他是一個獨立渲染區域，而且只有block-level box參與，規定了block-level box內部的佈局方式。

2、佈局規則

一、內部的box會在垂直方向上一個接一個的放置

<div class="div1"></div>
<div class="div2"></div>
複製代碼

二、同一個bfc內，兩個相鄰box元素的margin會產生重疊，重疊距離爲數值大的margin值

給div1設置 margin: 20px 0,給div2設置 margin: 30px 0,此時div1和div2之間的間距爲30px。

• 解決方式 讓兩個元素不屬於同一個BFC
  三、BFC區域不會與浮動元素重疊

<div class="left"></div>
<div class="main"></div>
複製代碼

此時main元素沒有產生bfc,left元素浮動，效果以下：

給main元素設置 overflow:hidden變爲bfc,效果以下：

四、計算BFC的高度時，浮動元素也參與計算
五、每一個元素的margin box的左邊， 與 包含塊 border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此

六、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素

三、產生BFC的方式

一、overflow屬性不是visible
二、float屬性不爲none
三、display屬性爲inline-block、table-cell、flex、inline-flex、table-caption
四、position爲absolute、fixed
五、body根元素