详解块级格式化范围（block formatting context）

详解块级格式化范围（block formatting context）

前几天讲闭合浮动元素的时候提到了块级格式化范围（block formatting context），现在我来详细解释一下。先看图片:

这两个普通的div的边距都是20px，但实际的边距不是20px+20px=40px，而是取20px，这就是最开始学css的同学总和我说的边距重叠，当俩个普通的div相遇时会有以下规则：

1. 当两个div的边距都是正的时取最大的margin最为边距。
2. 当两个div的边距都是一正一负时,边距为他们的边距相加。

刚才说的是普通情况下，所谓的普通就是没有长生格式化范围，看第二个图是产生格式化范围的情况，就是边距没有重叠，真是的边距就是20+20=40px，到现在我们知道了，产生块级格式化范围有两个特性，一个是清除浮动，一个是不会产生边距共享。下面看一下怎么才能产生块级格式化范围：

• 浮动元素,left或right皆可
• 绝对定位的元素
• table-cell table-captions 类型元素
• overflow 取职非visible的元素

还有一个问题就是当两个元素一个产生了块级格式化范围，一个没有时浏览器会怎么处理，ie6和ie7人为认为只要有一个产生了块级格式化就不应该和其他共享边距，而Firefox，opera，chrome，safari，ie8则认为应该共享边距。

边距共享还有另外一种形式就是div的嵌套，先看图片

这就是边距重叠的另外一种形式，由于div的嵌套，只有上下重叠，而左右没有重叠，当你最外层div设置padding和margin时就不会产生边距重叠，还有就是当最外成产生块级元素格式化范围时也可以避免边距重叠。

总结一下，产生块级元素格式化范围可以清除浮动和避免边距共享，而float有能产生块级元素格式化范围，所以很多人就会有float来实现上面的两个问题，或者是初学者不知道怎么回事，反正用float就能解决，这个不可取的，因为float很让人头痛。相比之下用overflow可能要好一些，但是有时定义了height或者max-height会产生一些问题，并且ie6也不会产生块级元素格式化范围，不会还好这个属性可以出发layout，可以达到同样的效果。