浮动元素搭配标准父盒子等宽间距

效果：

代码

		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/*清除前面的小圆点*/
			li{
				list-style: none;
			}
			.box{
				width: 460px;
				height: 300px;
				margin: 0 auto;
				background-color: gray;
				
			}
			.box li{
				width: 100px;
				height: 300px;
				float: left;
				background-color: yellow;
				/*小间距*/
				margin-right: 20px;
				/* 清除第四个盒子的外边距*/
			}
			.box .last{
				/*因为权重的原因，并不能清除外边距 .last 10 .box li 11 所以改为.box .last 20*/
				margin-right: 0;
			}
		</style>

		<!--ul和li有默认的内外边距，div没有内外边距-->
		<!--所以我们要先清除内外边距  *{margin:0,padding:0}-->
		<ul class="box">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li class="last">4</li>
		</ul>
		
	</body>

注意要点：

1、使用ul、li进行父盒子布局，首先要清除两标签的默认内外边距。
2、四个小盒子间隙，margin-right，最后一个盒子的边距，要注意清除。(检查)
3、标签权重大的，优先执行里面的内容，低的则被压抑，不执行。
4、使用浮动float。

若最后一个盒子，不清右侧边距以及权重不足以所有li的样式，均无法清除右边距。