fomatting context

引言

主要講解的是BFC上下文

本文是查看 史上最全面、最透徹的BFC原理剖析 的筆記
所以不會詳解BFC, 只是記錄學習心得, 以及重要規則避免原文失效

簡介

Formatting context是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係、相互作用

• Formatting context
• Block fomatting context (BFC)
• Inline formatting context (IFC)
• grid formatting context (GFC) css3新增
• flex formatting context (FFC) css3新增

BFC生成

• 根元素
• float的值不為none
• overflow的值不為visible
• display的值為inline-block、table-cell、table-caption table也認為可以生成BFC，其實這裡的主要原因在於Table會預設生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC
• position的值為absolute或fixed

BFC佈局規則

• 內部的Box會在垂直方向上一個接一個的放置
• 垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊（塌陷），與方向無關。）
• 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
• BFC的區域不會與float的元素區域重疊
• 計算BFC的高度時，浮動子元素也參與計算
• BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面元素，反之亦然

防止上下margin重疊

Box垂直方向的距離由margin決定。屬於同一個BFC(上例中是body根元素的BFC)的兩個相鄰Box的margin會發生重疊

只要2個邊距元素不屬於同一個BFC邊距就不會重疊

清除浮動

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

只要浮動的父元素創建BFC就行了, 比如 display: table-cell;

自適應多列佈局

BFC佈局規則第3條

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

BFC佈局規則第4條

BFC的區域不會與float box重疊

通過將每個元素創建BFC實現自適應多欄佈局