盒子浮动布局制作

效果：

html：

<div class="box1">
		<div class="box2">1
		</div>
		<div class="box3">
			<li>2</li>
			<li>3</li>
			<li class="x1">4</li>
			<li class="x3">5</li>
			<li class="x4">6</li>
			<li class="x2">7</li>
		
		</div>
	</div>

 css:

.box1{
			 width: 1000px;
			 height: 600px;
			 background-color: #aaffff;
			 margin: 50px auto;
		 }
		 .box2{
			 width: 200px;
			 height: 600px;
			 float: left;
			 background-color: #9af8ed;
		 }
		 .box3{
			 width: 800px;
			 height: 600px;
			 float: left;
			 background-color: #d5fad6;
		 }
		 .box3 li{
			 list-style: none;
			 width: 250px;
			 height: 290px;
			 background-color: #d2f7f7;
			 float: left;
			 margin-right: 25px;
		 }
		 .box1 .box3 .x1{
			 margin-right: 0px;
		 }
		 .box1 .box3 .x2{
		 	 margin-right: 0px;
			 margin-top: 20px;
		 }
		 .box1 .box3 .x3{
		 	margin-top: 20px;
		 }
		 .box1 .box3 .x4{
		 	margin-top: 20px;
		 }