<div class="left">
		左
	div>
	<div class="right">
		右
	div>

第一種 浮動

.left{
	width: 200px;
	float: left;
	height: 200px;
	background: #0000FF;
	
}
.right{
	margin-left: 200px;
	height: 200px;
	background: #00FF00;
}

弟二種 計算屬性

.left{
	width: 200px;
		float: left;
		height: 200px;
		background: #0000FF;
		
	}
.right{
	width: calc(100% - 200px);
	height: 200px;
	float: right;
	background: #00FF00;
}

第三種 flex

body,html{
	width:100%;
	display: flex;
}
.left{
	flex: 0 0 200px;
	height: 200px;
	background: #0000FF;
	
}
.right{
	flex: 1;
	height: 200px;
	background: #00FF00;
}

flex:flex-grow、flex-shrink 、flex-basis
flex-grow為0，則存在剩余空間也不放大
flex-shrink為1，則空間不足該項目縮小
flex-basis為auto，則該項目本來的大小