饿了么webapp之块级盒子垂直相邻margin重叠

效果图：

我这里设想四周margin都是一样的值，然后商品之间的分隔线是通过伪元素after添加border-bottom进去的，但是发现实际效果是：

这是由于块级元素相邻会造成margin重叠，本来上下都有margin，被重叠只剩下一个margin，具体原因见

http://www.cnblogs.com/zhangmingze/articles/4664074.html

这是与BFC有关的，BFC介绍：http://www.jianshu.com/p/682ae6476a14

之所以会重叠，是因为他们的margin直接接触，并没有border或者padding把他们分隔开

而我这里的解决方案是给商品盒子添加padding-bottom，即使margin被重叠，依然可以有padding撑开距离.

如果是父元素和子元素margin重叠:

1、而一般的解决方法是通过添加border或padding，使得margin分隔开

2、还可以利用BFC，给父元素设置了BFC，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。就相当于这个元素是一个独立的body，你想象一下你直接给body的直接子元素设置margin还是有效果的吧？

如果是相邻元素之间发生折叠：

1、由于是在同一个BFC才会折叠，因此你可以给他们包一个父元素，设置BFC，例如overflow:hidden，它们就不会在同一个BFC中，自然不会折叠。

2、可以通过clearance，具体介绍：http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

由于设置了浮动，被设置浮动的块盒是不会和其他元素折叠的，但是块盒后面的元素还是可以和浮动前面的元素折叠。因此，我们可以给后面的元素设置clear:both

.parent{width: 100px;height: 100px;border: 1px solid yellow;margin: 10px 10px 30px;float: left;}.next{width: 50px;height: 50px;border:1px solid blue;clear: both;margin: 50px; }.pre{width: 50px;height: 50px;background-color: pink;margin: 20px;}

<div class="pre"></div><div class="parent"></div><div class="next"></div>

从上面可知，parent是浮动元素，因此不会与它前面的元素的margin折叠。而next设置了清除浮动，它是闭合浮动元素，它会在它的margin-top之前留出一段距离，然而next的border-top一定是紧贴着parent的margin-bottom的，无论我们如何给next改变它的margin-top，效果都不会变，只有改变parent的margin-bttom才能改变他的位置。这是因为闭合浮动的块盒在margin-top上所产生的间距（clearance）的值与该块盒的margin-top之和应该足够让该块盒垂直的跨越浮动元素的margin-bottom，使闭合浮动的块盒的border-top恰好与浮动元素的块盒的margin-bottom相邻接。上面的网站上有详细介绍