很简单的一个前端重构问题，关于background-color,overflow,margin,padding

Question

下面两个网址里面，ul的上面是有背景色的

http://jsfiddle.net/p2227/DxxEL/

http://jsfiddle.net/p2227/DxxEL/1/

但是如果这样写css，ul的上下就没有背景色了（就是在margin-top,margin-bottom那一部分的背景色），是什么原因？
http://jsfiddle.net/p2227/DxxEL/2/

Answer 1

overflow触发了.prod-middle的BFC。BFC阻止了用例1中的margin的折叠。这是一个常见的BFC的特性：创建了BFC的元素不会与它们的子元素发生外边距折叠。
对比用例1和用例3可以发现，用例3中.prod-attr-list中的margin与.prod-middle折叠了，而用例1则没有。

BFC介绍详见：http://www.smallni.com/haslayout-block-formatting-contexts/

（用例1和用例2是两种常见的表达留白的方案。）

---

以下皆为这里部分内容的引用，其实是W3C的相应规则的翻译。

margin折叠的产生有几个条件：

• 这些margin都处于普通流中，并在同一个BFC中；
• 这些margin没有被非空内容、padding、border 或 clear 分隔开；
• 这些margin在垂直方向上是毗邻的，包括以下几种情况：
  1、一个box的top margin与第一个子box的top margin
  2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
  3、一个box的bottom margin与紧接着的下一个box的top margin
  4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况：

• 根元素的外边距不会参与折叠
• 一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。

Answer 2

我试了，显示背景色啊，只要你的ul没有float，按道理说ul外层的div都是包裹住ul的