效果图:
我这里设想四周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>