normal flow(正常流):正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。
在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。
值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！
<style> div { width: 100px; height: 100px; border: 1px solid #00A4CC; background-color: #3e8f3e; } .div1 { margin:20px 0; } .div2 { margin:40px 0; } </style> </head> <body> <div></div> <div></div> </body>
效果显示如下：
div1和div2的垂直距离由大的margin决定，也就是div2的40px而不是二者之和60px。
其次，行内元素是会被折断的，当宽度受到限制的时候，它会自动移动到下一行。这可能会产生一些难看的效果如果行内块有边框的话。看下面的效果：
<head> <style> div { width: 200px; height: 100px; border: 1px solid #00A4CC; } span { border: 2px solid #00ff00; } </style> </head> <body> <div> <span> 我会掉到下一行我会掉到下一行我会掉到下一行</span> </div> </body>
效果显示如下：
containing block（包含块）：是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置往往是由该元素所在的包含块决定的。也就是说一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。
一个元素的containing block按照以下方式定义：
1.用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block）。
2.对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。
3.如果元素有属性 'position:fixed'，containing block 由视口建立。
4.如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
如果祖先是块级元素，containing block 由祖先的padding edge形成。
如果祖先是内联元素，containing block 取决于祖先的 direction 属性。
如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是 containing block 的上方和左方，祖先的最后一个盒子的下、右内容边界是 containing block 的下方和右方。
如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是 containing block 的上方和右方，祖先的最后一个盒子的下、左内容边界是 containing block 的下方和左方。
5.如果没有祖先，根元素盒子的内容边界确定为 containing block。
名词解释：
视口：通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。
根元素：源文件中，每一个元素都有一个父元素，只有一个例外，它就是根元素。
padding edge：请参见下图：
举个板栗：
<html> <head> <title>Illustration of containing blocks</title> </head> <body> <div> <p>This is text in the first paragraph...</P> <p>This is text <em> in the <strong>second </strong> paragraph. </em> </p> </div> </body> </html>
那么，在没有指定任何position的情况下，上方代码的containng block确定方式为：
如果我们设置div1的position为：
#div1 { position: absolute;}
此时，div1 的 containing block 就不再是 body，它变成了初始 containing block（因为这里还没有具有 position 的祖先盒子）。
3.BFCBFC（Block Formatting Context 块格式化上下文）：是W3CCSS2.1规范中的一个概念，在CSS3中被修改为flowroot。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BF么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。