CSS---多种方法实现两栏布局

方法一--Float浮动

HTML代码：

<div class="big">
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS代码：

.big{
	clear: both;
}
.left{
	width: 40%;
	height: 400px;
	float: left;
	background-color: #ffe4e1;
}
.right{
	width: 60%;
	height: 400px;
	float: right;
	background-color: #e6e6fa;
}

两个div的宽度采用了百分比的形式进行设置，恰好使其占满整个页面宽度。为两个div设置float属性，分别让其左右浮动，由于float属性使div脱离了标准流，故需要给父div清除浮动，避免影响接下来的排版。

方法二--position相对定位

HTML代码：

<div class="big">
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS代码：

.left{
	width: 40%;
	height: 400px;
	background-color: #ffe4e1;
}
.right{
	width: 60%;
	height: 400px;
	background-color: #e6e6fa;
	position: absolute;
	top:0;
	left: 40%;
}
.big{
	position: relative;
}

首先对父元素设置相对定位relative属性，限制子元素的绝对定位。对右边的盒子进行absolute相对定位，配合top和left进行位置的确定

方法三--圣杯布局

HTML代码：

<div class="big">
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS代码：

.left{
	width: 40%;
	height: 400px;
	float: left;
	background-color: #ffe4e1;
}
.right{
	width: 60%;
	height: 400px;
	float: left;
	background-color: #e6e6fa;
	margin-right: -60%;
}
.big{
	clear: both;
}

使用圣杯布局主要是使用了margin的负边距，首先使两个div都左浮动，并为父元素清除浮动。这样就导致左右两个盒子位于同一个位置，为右盒子设置负的margin-right，长度设置为整个右盒子的宽度。

方法四--flex布局

HTML代码：

<div class="big">
	<div class="left"></div>
	<div class="right"></div>
</div>

CSS代码：

.left{
	width: 40%;
	height: 400px;
	background-color: #ffe4e1;
}
.right{
	flex:1;
	height: 400px;
	background-color: #e6e6fa;
}
.big{
	display: flex;
	flex-flow: row;
}

左边定宽，右边自适应

为父元素设置display属性设置为flex，并添加flex-flow为row使其盒子行排列。设置右盒子flex为1，自动分配剩余宽度

实现效果