1.什么是FC

2.BFC塊級格式化上下文(Block formatting context)

Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
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 中才有。

(1)定義:它是一個獨立的渲染區域,只有block-level-box參與.它規定了塊級盒子內部子元素的布局.
(2)BFC常見觸發條件:

1>.根元素，即HTML元素 2>.float不為none 3>.position不為static或者是relative 4>.overflow的值為hidden,auto或者scroll 5>.display的值為table-cell,table-caption或者inline-block

(3)BFC布局規則:
1>.BFC內部的盒子在垂直方向一個接一個的放置
2>.同一個BFC中相鄰盒子的margin會發生合并

3>.每個元素盒子的左外邊緣(margin-box)和包含它的容器的border-box接觸(對于從右往左的排版則相反，是右邊接觸),即使存在浮動也是如此
抽象1>,2>,3>:盒子排列方式,盒子緊鄰時外邊距會合并,盒子嵌套時內部元素的外邊距盒子和外部容器的border-box緊鄰
eg:

說明:img圖片的margin-box和class為first塊元素的border-box的內側接觸.

4>.BFC區域不會和float-box重疊
5>.BFC是頁面上一個獨立的容器,它其中的子元素不會影響到外面得元素,外面得元素也不會影響到內部
6>.計算BFC的高度時,浮動元素也參與計算

簡單記錄順序:獨立的(5>)渲染(3>,1>,2>,4>)區域(區域的計算方式6>)

(4).重疊的計算方式
1>當兩個margin都是正值的時候，取兩者的最大值；
2>當margin都是負值的時候，取的是其中絕對值較大的，然后，從 0 位置，負向位移；
3>當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.可以阻止元素被浮動元素覆蓋
2>.實現自適應兩欄布局
3>.可以包含浮動元素——清除內部浮動
4>.不同的BFC可以阻止margin重疊

(6)思維導圖

總結

以上是生活随笔為你收集整理的FC及BFC的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。