先来个例子
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
上面例子中，三个div是怎么 定位 的？它们的 尺寸 是怎么计算的？下面慢慢来讲
框的定义
CSS1.0中并没有这个概念
如下图，来自Box model
CSS中的定位体系
| 类别名称 |
说明 |
| 常规流 |
如同其名，也是区分浮动与约对定位的的一个概念。常规流中会根据块框和内行框进行相应的BFC 和 IFC； |
| 浮动 |
一个框，首先会根据常规流布局，之后再将它从流中取出按照float的方向进行偏移； |
| 绝对定位 |
一个框从常规流中脱离出来，以它的包含块为参考，进行定位与尺寸计算； |
包含块
在W3C上的定义：
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
它是来计算框的定位与大小的重要因素，如框的padding，当设置框的padding为10%时，会按照其包含块的宽度的百分比来算，如下面的代码(其padding等同于padding:20px;)：
<div style="width:200px;height:500px;">
<div id="box" style="padding:10%;">box</div>
</div>
BFC 与 IFC
BFC (block formating context),可以把它想像成一个箱子，箱子把它里面的元素和外面分开.块框参与BFC。
另外当框得到以下触发条件时，也会BFC。
触发条件：浮动元素、绝对定位元素，'display' 特性为 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素。
且相对于普通框的BFC，它有这些不同：
- 可以包含浮动元素;
- 可以阻止外边距折叠;
- 可以防止元素被浮动元素覆盖;
IFC (inline formating context),在IFC中，框是一个一个水平排列的。框水平方向上的margin,border,和padding都保留，垂直方向上可以顶部、底部、或根据文字的其线对齐。
再说说之前例子
按照上面所讲的 定位体系，三个div会以常规流的方式进行定位。
其宽度会依照其包含块（也就是body）进行计算（规则地址：http://t.cn/zHNqquT）
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
其高度的规则为（地址：http://t.cn/zHNqIF9）
If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0. If 'height' is 'auto', the height depends on whether the element has any block-level children and whether it has padding or borders:
再问，如果给例子中div2加一个浮动呢？
按照上面的所讲的定位体系，三个div首先会以常规流的方式进行定位，然后对div2进行向浮动方向进行偏移，如果是左边，则和其它包含块的左边对齐，如果是右边，则和其它包含块的右边对齐，如果与包含块之间有其它浮动框，则和此浮动框的边线对齐；
如果再给每个div加一个margin:10px呢？
首先以常规流的方式进行定位，两个div的包含块都是body,body是块框，会BFC，BFC中相邻的块级元素的垂直外边距会折叠，这样div1与div2之间会折叠减为10px,div2与div3之间会折叠为10px.
然后对div2进行浮动（相应方向的偏移），而且浮动元素BFC和会阻止和div1的折叠.
如下例子,浮动元素div2为什么溢出容器div1
<style>
.div1 {
border: 1px solid red;
}
.div2{
float: left;
height: 300px;
background: red;
}
</style>
<div class="div1">
<div class="div2">
div2
</div>
</div>
首先按常规流进行定位，然后对div2进行浮动，再然后根据其它包含块进行计算宽高，计算高的时候仍是按框内元素的高度（只算常规流块框的高度）进行计算，这样就脱离了。
怎么解决？可以参考前面讲的BFC，或 http://t.cn/zjKiRGX
参考资料：
先来个例子
上面例子中，三个div是怎么 定位 的？它们的 尺寸 是怎么计算的？下面慢慢来讲
框的定义
CSS1.0中并没有这个概念
如下图，来自Box model
CSS中的定位体系
块框和内行框进行相应的BFC和IFC；包含块为参考，进行定位与尺寸计算；包含块
在W3C上的定义：
它是来计算框的定位与大小的重要因素，如框的padding，当设置框的padding为10%时，会按照其包含块的宽度的百分比来算，如下面的代码(其padding等同于padding:20px;)：
BFC 与 IFC
BFC (
block formating context),可以把它想像成一个箱子，箱子把它里面的元素和外面分开.块框参与BFC。另外当框得到以下触发条件时，也会BFC。
触发条件：浮动元素、绝对定位元素，'display' 特性为 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素。且相对于普通框的BFC，它有这些不同：
IFC (
inline formating context),在IFC中，框是一个一个水平排列的。框水平方向上的margin,border,和padding都保留，垂直方向上可以顶部、底部、或根据文字的其线对齐。再说说之前例子
按照上面所讲的
定位体系，三个div会以常规流的方式进行定位。其宽度会依照其包含块（也就是
body）进行计算（规则地址：http://t.cn/zHNqquT）其高度的规则为（地址：http://t.cn/zHNqIF9）
再问，如果给例子中div2加一个浮动呢？
按照上面的所讲的
定位体系，三个div首先会以常规流的方式进行定位，然后对div2进行向浮动方向进行偏移，如果是左边，则和其它包含块的左边对齐，如果是右边，则和其它包含块的右边对齐，如果与包含块之间有其它浮动框，则和此浮动框的边线对齐；如果再给每个div加一个margin:10px呢？
首先以
常规流的方式进行定位，两个div的包含块都是body,body是块框，会BFC，BFC中相邻的块级元素的垂直外边距会折叠，这样div1与div2之间会折叠减为10px,div2与div3之间会折叠为10px.然后对div2进行浮动（相应方向的偏移），而且浮动元素BFC和会阻止和div1的
折叠.如下例子,浮动元素div2为什么溢出容器div1
首先按常规流进行定位，然后对div2进行浮动，再然后根据其它包含块进行计算宽高，计算高的时候仍是按框内元素的高度（只算常规流块框的高度）进行计算，这样就脱离了。
怎么解决？可以参考前面讲的
BFC，或 http://t.cn/zjKiRGX参考资料：