两列布局是左边一栏定宽，右边一栏自适应的布局。
HTML代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="2columns.css"/>
</head>
<body>
<div class="container">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
</div>
</div>
</body>
</html>
CSS有以下几种实现方法：
1.左边向左浮动，右边设margin-left
html,body{
padding:0;
margin:0;
}
.left{
float:left;
width:200px;
height:300px;
background-color: red;
}
.right{
margin-left:200px;
height:350px;
background-color: blue;
}
2.左边绝对定位，右边设margin-left
html,body{
padding:0;
margin:0;
}
.container{
position:relative;
}
.left{
position:absolute;
left:0;
width:200px;
height:300px;
background-color: red;
}
.right{
margin-left:200px;
height:350px;
background-color: blue;
}
3.加一个父级flex容器，右边flex:1
html,body{
padding:0;
margin:0;
}
.container{
display:flex;
}
.left{
width:200px;
height:300px;
background-color: red;
}
.right{
flex:1;
height:350px;
background-color: blue;
}
4.左边向左浮动，右边触发BFC
html,body{
padding:0;
margin:0;
}
.left{
float:left;
width:200px;
height:300px;
background-color: red;
}
.right{
overflow:hidden;
height:350px;
background-color: blue;
}
以上四种方式都可以呈现出下图布局效果：
