css三栏布局

1、float

• 标签排序 左 右 中
• 清除浮动

<style>
    .layout-left {
        width: 200px;
        height: 300px;
        float: left;
        background-color: blueviolet;
    }
    .layout-right {
        width: 200px;
        height: 300px;
        float: right;
        background-color: aqua;
    }
    .layout-center {
        height: 300px;
        background-color: brown;
    }
</style>
<div class="layout">
    <div class="layout-left">左边</div>
    <div class="layout-right">右边</div>
    <div class="layout-center">中间</div>
</div>

2、position absolute

脱离文档流，影响后面元素布局

.layout-left {
    position: absolute;
    left: 0;
    width: 200px;
    background-color: blueviolet;
}
.layout-center {
    position: absolute;
    left: 200px;
    right: 200px;
    background-color: brown;
}
.layout-right {
    position: absolute;
    right: 0;
    width: 200px;
    background-color: aqua;
}
<div class="layout">
    <div class="layout-left">左边</div>
    <div class="layout-center">中间</div>
    <div class="layout-right">右边</div>
</div>

3、 display flex

• flex: 1
• 兼容性不太好

.layout{
    display: flex;
}
.layout-left {
    width: 200px;
    background-color: blueviolet;
}
.layout-center {
    flex: 1;
    background-color: brown;
}
.layout-right {
    width: 200px;
    background-color: aqua;
}

4、display： table

一列超出高度，其他也超出

.layout{
    display: table;
    width: 100%;
}
.layout-left {
    display: table-cell;
    width: 200px;
    background-color: blueviolet;
}
.layout-center {
    display: table-cell;
    background-color: brown;
}
.layout-right {
    display: table-cell;
    width: 200px;
    background-color: aqua;
}

5、 display: grid

兼容性不太好

.layout{
    display: grid;
    grid-template-columns: 200px auto 200px;
}
.layout-left {
    background-color: blueviolet;
}
.layout-center {
    background-color: brown;
}
.layout-right {
    background-color: aqua;
}