float动态布局遇到的box-sizing问题

做了个展示页面，希望根据浏览器的宽度动态布局item的大小和数量：

@media screen and (max-width: 2560px) {
  .col {
    width: calc(100% / 5);
  }
}
@media screen and (max-width: 2048px) {
  .col {
    width: calc(100% / 4);
  }
}
@media screen and (max-width: 1680px) {
  .col {
    width: calc(100% / 3);
  }
}
@media screen and (max-width: 1080px) {
  .col {
    width: calc(100% / 2);
  }
}

遇到了问题，老是右边的掉下去：

后来发现需要设置box-sizing：

* {
  padding: 0;
  margin:0;
  box-sizing: border-box;
}

做一下记录，省得忘了。