css三栏布局—position、float、flex

1.三栏布局

1.1实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

<div class="wrapper">
        <div class="left">试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
            试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
        </div>
        <div class="mid">试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
            试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
        </div>
        <div class="right">试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
            试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果试一下自适应效果
        </div>
    </div>

1.1.1 position

.left{
    position: fixed;
    height:200px;
    width: 200px;
    background-color:cadetblue;
}
.mid{
    overflow: hidden;
    height: 200px;
    background-color: yellowgreen;
    margin: 0 200px 0  200px;

}
.right{
    position: relative;
    height: 200px;
    width: 200px;
    background-color: bisque;
    top: -200px;
    left: calc(100% - 200px);
}
/* calc() 函数运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；*/

1.1.2 float

.left{
    float: left;
    width:200px;
    height:200px;
    background-color:cadetblue;
}
.mid{
    overflow: hidden;
    height:200px;
    background-color:yellowgreen;
    margin-right: 200px;   
}
.right{
    float: right;
    height:200px;
    width: 200px;
    background-color: bisque;
    margin-top: -200px;
} 

1.1.3 flex

要使用flexbox，就必须先设置弹性容器。display：flex（块级弹性容器）/inline-flex（行内弹性容器）
flex-direction:指定容器中弹性元素的排列方式。row（默认，水平排列，主轴）column（竖直排列，侧轴）
flex-wrap:设置元素是否在弹性容器中自动换行。nowrap（默认，不自动换行）
justify-content:设置主轴上的元素如何排列。
flex：增长 缩减 基础 ；（简写属性）

.wrapper{
    display: flex;
    height:200px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
}
.left{
    flex: 0 0 200px;
    background-color:cadetblue;
    overflow: hidden;
}
.mid{
    overflow: hidden;
    background-color: yellowgreen;
}
.right{
    flex: 0 0 200px;
    background-color: bisque;
}

1.2实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

1.2.1 position

.left{
    position: relative;
    height:200px;
    width: 200px;
    background-color:cadetblue;
}
.mid{
    position: relative;
    height: 200px;
    width: 200px;
    background-color: yellowgreen;
    left: 200px;
    top: -200px;
}
.right{
    position: relative;
    overflow: hidden;
    height: 200px;
    background-color: bisque;
    top:-400px;
    left: 400px;
}

1.2.2 float

.left{
    float: left;
    width:200px;
    height:200px;
    background-color:cadetblue;
}
.mid{
    float: left;
    width:200px;
    height:200px;
    background-color:yellowgreen;
}
.right{
    overflow: hidden;
    height:200px;
    background-color: bisque;
} 

1.2.3 flex

.wrapper{
    display: flex;
    height:200px;
}
.left{
    flex: 0 0 200px;
    background-color:cadetblue;
}
.mid{
    flex: 0 0 200px;
    background-color: yellowgreen;
}
.right{
    background-color: bisque;
}

补充