两栏布局——左边固定右边自适应

**

左边固定右边自适应

**
效果图如下：

html布局代码如下：

<div class="left"></div>
<div class="main"></div>

样式如下：

• 方法一：浮动法

.left{
   width: 200px;
    height: 400px;
    float: left;
    background-color:red;
}
.main{
    height: 400px;
     margin-left: 0 200px;
    background-color:yellow;
} 

• 方法二：绝对定位法

.left{
   width: 200px;
    height: 400px;
    background-color:red;
    position: absolute;
}
.main{
    height: 400px;
    position: absolute;
    left: 200px;
    background-color:yellow;
} 

• 方法三：flex布局

body{
	display: flex;
}
.left{
    width: 200px;
    height: 400px;
    background-color:red;
}
/* 设置flex为1,占位等于父元素-其他子元素 */
.main{
    height: 400px;
    background-color:yellow;
    flex:1 
}