盒模型

盒模型

一个盒包括了内容(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，

盒模型

原文：http://www.cnblogs.com/muqnly/p/4948828.html