慕课笔记利用css进行布局【两列布局】

<html>
	<head>
		<title>两列布局</title>
		<style type="text/css">
			body{margin:0;padding:0;text-align:center}
			/*两列的布局样式*/
				/*float:left向左浮动*/
			.content{920px;margin:0 auto}
			.left{20%;height:500px;background:#f00;float:left}
			.right{80%;height:500px;background:#ff0;float:right}
		</style>
	</head>
	<body>

	 
	 <!--/*两列的布局样式*/-->
	 两列的布局样式，采用浮动的方式<br/>
	 <div class="content">
	 <div class="left"></div>
	 <div class="right"></div>
	 </div>

	</body>
</html>

效果图如下：

关键知识点：

float:left向左浮动

float:right向右浮动