float - 爱码网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.a1,.a2,.a10,.a11{
				height: 100px;
			}
			.a1{
				background: firebrick;
			}
			.a2,.a4,.a11{
				width: 1200px;
				margin: 0px auto;
			}
			.a2{
				background: hotpink;
			}
			.a3,.a4{
				height: 200px;
			}
			.a3{
				background: darkorchid;
			}
			.a4{
				background: lawngreen;
			}
			.a5,.a6,.a9{
				height: 260px;
			}
			.a5{
				background: aqua;
			}
			.a6,.a9,.a8{
				width: 50%;
				float: right;
			}
			.a6{
				background: fuchsia;
			}
			.a7{
				background: gold;
			}
			.a7,.a8{
				height: 300px;
			}
			.a8{
				background: green;
			}
			.a9{
				background: orchid;
			}
			.a10{
				background: maroon;
			}
			.a11{
				background: aqua;
			}
		</style>
	</head>
	<body>
		<div class="a1">
			<div class="a2"></div>
		</div>
		<div class="a3">
			<div class="a4"></div>
		</div>
		<div class="a5">
			<div class="a6"></div>
		</div>
		<div class="a7">
			<div class="a8"></div>
			<div class="a9"></div>
		</div>
		<div class="a10">
			<div class="a11"></div>
		</div>
	</body>
</html>
float