实现圣杯布局的 css 方案

<div class="float">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

.left {
    float: left;
}
.right {
    float: right;
}

<div class="layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.layout {
    position: relative;
}

.left {
    background-color: red;
    position: absolute;
    width: 200px;
    left: 0;
    top: 0;
}

.right {
    background-color: red;
    position: absolute;
    width: 200px;
    right: 0;
    top: 0;
}

.center {
    background-color: skyblue;
    left: 200px;
    right: 200px;
    top: 0;
}

<div class="layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.layout div {
    height: 200px;
    display: table-cell;
}

.left, .right {
    width: 200px;
    background: red;
}

.center {
    background: skyblue;
}