盒模型

盒模型

一個盒包括了內容(content)　邊框(border)　內邊距(padding)　外邊距(margin)．

正常流

正常流是頁面，大部分盒都是處於正常流中．正常流有兩種格式化上下文：塊級格式化上下文(Block formatting context) 和　行內格式化上下文(inline formatting context).

塊格式化上下文( Block formatting context )

浮動元素(float)、絕對定位元素(absolute)，'display' 特性爲 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素，會建立新的塊格式化上下文。是這些元素建立了塊格式化上下文，它們自己不是塊格式化上下文。

即：float:left/right   position:absolute/fixed  display:table-cell/table-caption/inline-block overflow:hidden/scroll/auto 

BFC就像一個大箱子，不少元素裝在裏面，箱子把它們和外面的元素隔開，裏面的元素不會對外面有影響，而外面的元素也不會影響裏面的元素。

在塊格式化上下文中，框會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部。相鄰盒子的間距是由margin決定。在塊格式化上下文中相鄰的塊級元素的垂直外邊距會摺疊( collapse )，咱們通常會採用overflow:hidden解決。

 

行內格式化上下文( Inline formatting context )

相對於ＢＦＣ，在行內格式化上下文中，框( boxes )一個接一個地水平排列，起點是包含塊的頂部。 水平方向上的 margin，