问题：
在我们进行布局时, 我们经常会遇到要求中间摆放多个item，且两边不需要空隙的情况，我们通常会使用float浮动布局，然后设置margin-right/margin-left让他们之间产生间距, 那么这样会导致最后总有一个元素设置的margin-right/margin-left是多余的
解决方法：
解决办法一:
每一行的最后一个元素, 总是加一个class, 通过类选择器去除这个margin-right
解决办法二:
通过伪类选择器，但是不支持IE8，或者会导致存在兼容性问题
解决办法三
（最优解）:
width of block （包裹块）= content-width（auto） + margin-left + margin-right + padding+border，因为一般 padding和border都是0，即通常这个公式可以简化为：
width of block （包裹块）= content-width（auto） + margin-left + margin-right
所以当包裹块的宽度固定的时候，不设置 content-width的宽度，再设置margin的宽度为负值可以加大包裹块的宽度.
代码和具体实现如下所示：
<style>
.container{
width: 990px;
height: 400px;
background-color:pink;
}
.wrap{
margin-right: -10px;
}
.box{
width: 190px;
height: 100px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-top: 20px;
}
</style>
</head>
<!-- 即此处.container=.wrap+margin的值，因为.container 的值是已经确认了的，
.wrap的值没有确定，默认是auto,所以设置margin为负值后可以撑开.container的值，
使得最后一个元素即可以有空间往上排又不会将多出部分露出来 -->
<body>
<div class="container">
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
版权声明：本文为ZQY1436556395原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。