css两列布局
一、优先渲染主要部分
当主要部分是自适应且需要优先渲染的时候，可采用以下三种方式：
<!-- html结构 -->
<div class="main">
<div class="main-content">main</div>
</div>
<div class="left">left</div>1.position
/*利用内联样式，left将main覆盖*/
.main{
display:inline-block;/*内联元素，left直接浮动到main之前*/
margin-left:-200px;
background:yellow;
width:100%;
/*opacity:0;用于检验*/
}
.main-content{
margin-left:200px;
}
.left{
width:200px;
background:red;
float:left;/*left浮动，被main盖住了，使用position使其出现于上层*/
position:relative;
}2.借鉴双飞翼布局
.main{
float:left;
width:100%;
}
.main-content{
margin-left:200px;
background:yellow;
}
.left{
width:200px;
float:left;
background:red;
margin-left:-100%;
}3.利用display属性
/*利用内联样式，left将main的左侧覆盖*/
.main{
display:inline-block;/*内联元素，left直接浮动到main之前*/
margin-left:-200px;
background:yellow;
width:100%;
/*opacity:0.3;*//*用于检验left的位置*/
}
.main-content{
margin-left:200px;
}
.left{
width:200px;
background:red;
float:left;/*left浮动，被main盖住了，使用position使其出现于上层*/
position:relative;
}这三个是优先渲染main部分，再渲染旁边的。
二、右边固定左边自适应
1.flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
display:flex;
}
.left{
flex:1;
background:yellow;
}
.right{
width:200px;
background:red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">left.....</div>
<div class="right">right....</div>
</div>
</body>
</html>
2.position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content{
position:relative;
}
.left{
background:yellow;
width:100%;
position:absolute;
/*float:left;*/ /*此处需要left部分也脱离文档流*/
}
.right{
position:absolute;
right:0;
width:200px;
background:red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">left.....</div>
<div class="right">right....</div>
</div>
</body>
</html>
三、左边固定右边自适应
<!-- html部分 -->
<div class="content">
<div class="left">left.....</div>
<div class="right">right....</div>
</div>1.flex布局（以下只写css部分）
.content{
display:flex;
}
.left{
width:200px;
background:red;
}
.right{
flex:1;
background:yellow;
}
以下几个例子的效果图均类似：
2.float+bfc
.left{
background:red;
width: 200px;
float: left;
}
.right{
background: yellow;
overflow: hidden;/*触发bfc*/
}
3.position
.content{
position:relative;
}
.left{
width:200px;
background:red;
position:absolute;
}
.right{
position:absolute;
left:200px;
background:yellow;
right:0;/*没有right:0;时，无法自适应*/
}4.float
.left{
width:200px;
background-color:red;
float:left;
}
.right{
background:yellow;
margin-left:200px;
}
第三部分例图均为上部样式。
