页面布局（一）——两栏布局

两栏布局

		<!--1.浮动布局-->
		<div id="d1">
			<div class="left"></div>
			<div class="right">
				<p>这是浮动布局</p>
			</div>
		</div>
		<!--2.定位布局-->
		<div id="d2">
			<div class="left"></div>
			<div class="right">
				<p>这是定位布局</p>
			</div>
		</div>
		<!--3.flex布局-->
		<div id="d3">
			<div class="left"></div>
			<div class="right">
				<p>这是flex布局</p>
			</div>
		</div>
		<!--4.表格布局-->
		<div id="d4">
			<div class="left"></div>
			<div class="right">
				<p>这是表格布局</p>
			</div>
		</div>
		<!--5.网格布局-->
		<div id="d5">
			<div class="left"></div>
			<div class="right">
				<p>这是网格布局</p>
			</div>
		</div>

**{
	margin: 0;
	padding: 0;
}
/*浮动*/
.left,.right{
	height:200px;
}
.left{
	width:200px;
}
#d1 .left{
	float: left;
	background: red;
	}
#d1 .right{
	margin-left:200px;
	background: blue;
}
/*定位*/
#d2{
	height:200px;
}
#d2 .left{
	position:absolute;
	left:0;
	background: palevioletred;
}
#d2 .right{
	position:absolute;
	right:0;
	left:200px;
	background: darkcyan;
}
/*flex*/
#d3{
	display: flex;
}
#d3 .left{
	background: aqua;
}
#d3 .right{
	flex:1;
	background: salmon;
}
/*表格*/
#d4{
	display: table;
	width: 100%;
}
#d4 .left{
	display: table-cell;
	background: fuchsia;
}
#d4 .right{
	display: table-cell;
	background: darkblue;
}
/*网格*/
#d5{
	display: grid;
	grid-template: 200px/200px auto;
}
#d5 .left{
	background: red;
}
#d5 .right{
	background: aqua;
}