一、float + 百分比
body,html,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
overflow: hidden;
}
li{
width: 30.6666%;
height: 50px;
margin: 0 2% 10px 0;
float: left;
/*margin-bottom: 10px;*/
background: red;
}
li:nth-of-type(3n+1){
margin-left: 2%;
}
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
优点：
简单快速；宽度间距可控制。
缺点：
需要知道具体列数从而设置对应的百分比宽度和间距；脱离文档流需要清除浮动。
二、内联块元素(inline-block) + 百分比
body,html,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
font-size: 0;
}
li{
width: 30.6666%;
height: 50px;
margin: 0 2% 10px 0;
display: inline-block;
background: red;
}
li:nth-of-type(3n+1){
margin-left: 2%;
}
优点：
传统方法，所有浏览器均支持，宽度间距可控制大小。
缺点：
需要对父级元素设置文字大小为0，否则会有误差，布局失效；需要知道具体列数。
三、flex + px
body,html,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
li{
width: 200px;
height: 50px;
background: red;
margin: 0 10px 20px 10px;
}
.empty{
width: 200px;
margin: 0 10px;
height: 0;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="empty"></li>
<li class="empty"></li>
</ul>
优点：
根据空元素的数目可动态支持最多n(空元素)+2个等比列数；不脱离文档流。
缺点：
页面宽度变化时，间距大小不可控。
四、flex + 百分比
body,html,ul,li{
padding: 0;
margin: 0;
}
ul{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
li{
width: 30%;
height: 50px;
background: red;
margin: 0 0 10px 0;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
优点：
宽度间距可控制；根据元素总宽度，浏览器根据剩余宽度自动分配间距宽度；不脱离文档流，简单快速。
缺点：
需要知道具体的列数从而设置宽度大小；低级浏览器需要做兼容。
总结
1、具体列数 ：使用flex+百分比、float+百分比和inline-block+百分比布局，针对目前大部分浏览器均支持flex情况，flex+百分比布局最优。
2、n列数：使用flex+px布局，空元素n(即高度为0)数目越多，支持的列数越多。
