或許你沒聽過 Block Formatting Context，但你肯定有用過！其實在切版時，常常會使用到 BFC，只是你沒有意識到而已，如果能夠有意識的使用 BFC，對於版面的掌控非常有幫助。
CSS 原理 - Formatting Context
每個元素都是一個個的盒子(box)，這些盒子在 in flow 下會如何排列就要看該盒子處在什麼樣的佈局環境，而 formatting context (格式化上下文) 指的就是佈局環境，不同類型的佈局環境會有不同的佈局規則，換句話說，處在不同類型佈局環境裡的盒子，排列方式會有所不同。
CSS 原理 - Line box
Line box 就像筆記本上的線框，一行一行的垂直堆疊，裡面裝著文字或是 inline-level boxes，而我們可以利用 text-align 與 vertical-align 屬性操控 inline-level boxes 在 line box 裡的水平與垂直對齊。
CSS 原理 - 你所不知道的 display
Visual formatting model (視覺格式化模型) 對於排版來說是很重要的觀念，但不是那麼平易近人且有點抽象，在初次看 W3C 規範 時一定是霧煞煞，強烈建議先釐清幾個重要名詞的定義，會發現繞來繞去，講的其實都是相同的概念。
CSS 原理 - Collapsing margins
什麼是 Collapsing margins？
先來看一段 W3C 規範 的敘述：
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
CSS 原理 - Containing block
Containing block，中文常被翻譯為包含塊，它其實代表的是一個「區域」，一個由 box model 的 content edge 或 padding edge (若有設定 padding)所圍繞的範圍，它攸關元素的定位、寬高、內距與外距的計算，所以必須清楚知道元素的 containing block 是誰，才不會使畫面失控。
CSS 原理 - Box model
想像每個元素都是個盒子，而 <html> 就像是個超級大盒子，裡面裝了許許多多大小不一的盒子，像是 <div>、<p>、<span>、<button>…等等，而每個盒子由四個部分組成。
