BFC原理

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

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

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

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

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

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

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

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

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

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

給main元素設定overflow:hidden變為bfc,效果如下：

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

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

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

相關文章