解决布局相邻块级元素有间距的问题

在日常的布局中，我们可能会遇到类似的布局，下面以京东为例

我们发现相邻的块级元素都有间距，乍一看，直接给每个块级元素加一个右外边距不就可以了吗？
但实际情况是，美工会给固定宽高的设计稿，比如给父元素div1000px，给子元素div250px。那么给子元素浮动在加外边距就会导致最后一个子元素在第一行内不够位置而换行。
为了解决这个问题，我们再加一个div包住所有子元素并给他设置样式margin-left或margin-right属性。
代码如下

<style>
        .container {
   
            width: 1000px;
            height: 250px;
            margin: 0 auto;
            background-color: purple;
        }
        .wrap {
   
            margin-left: -40px;
        }
        .item {
   
            float: left;
            width: 250px;
            height: 250px;
            background-color: pink;
            margin-right: 10px;
        }
    </style>

<div class="container">
        <div class="wrap">
            <div class="item"