三栏布局的实现方式，尽可能多写，浮动布局时，三个div的生成

<div class="outer">
    <div class="sider left"></div>
    <div class="center"></div>
    <div class="sider right"></div>
</div>

.sider {
    width: 300px;
    height: 400px;
    background-color: lightskyblue;
}
 
.left {
    float: left;
}
 
.right {
    float: right;
}
 
.center {
    /* 方案一：
    margin: 0 200px 0 300px;
    */
    /* 方案二： */
    float: left;
    width: calc(100% - 600px);
 
    height: 400px;
    background-color: pink;
}

.outer {
    position: relative;
}
 
.sider {
    position: absolute;
    top: 0;
    height: 500px;
    width: 300px;
    background-color: lightskyblue;
}
 
.left {
    left: 0;
}
 
.right {
    right: 0;
}
 
.center {
    /* 方案一：
    margin: 0 200px 0 300px;
    */
    /* 方案二：
    position: absolute;
    left: 300px;
    width: cala(100% - 600px);
    */
    /* 方案三： */
    position: absolute;
    left: 300px;
    right: 300px;
 
    height: 500px;
    background-color: pink;
}

.outer {
    display: flex;
    height: 500px;
}
 
.sider {
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}
 
.center {
    order: 2; /* 默认值为0，order越小位置越靠前，越靠上，此时就不用考虑覆盖的问题了*/
    flex-grow: 1;
    /* flex-grow : 默认值为0，为0时有剩余空间也不放大，子元素该属性均为1时，剩余空间被所有为1的子元素均分，有一个子元素该属性为2时，该元素将分得或者努力分得其他为1的子元素所分得空间2倍大小的空间 */
    /* flex-shrink : 默认值为1，当子元素中存在某个元素该属性为0时，若空间不足，则为1的缩小，为0的不变，因此可以猜测，为2的弱小的应该是更多，应该是缩小了为1缩小的空间的两倍 */
 
    background-color: pink;
}
 
.left {
    order: 1;
}
 
.right {
    order: 3;
}

.outer {
    display: table;
}
 
.sider {
    width: 200px;
    height: 500px;
    background-color: lightskyblue;
}
 
.center {
    display: table-cell;
    width: 100%;
    height: 500px;
    background-color: pink;
}

.outer {
    display: grid;
    width: 100%;
    grid-template-rows: 500px;
    grid-template-columns: 200px auto 200px;  
}
 
.sider {
    background-color: lightskyblue;
}
 
.center {
    background-color: pink;
}

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

.wrapper {
    height: 500px;
    padding: 0 200px 0 300px; /* wrapper的container两侧空出来left和right的宽度 */
}
 
.center, .left, .right {
    position: relative;
    float: left;
    height: 500px;
}
 
.center {
    width: 100%; /* 宽度＝wrapper的container的宽度，两侧已空出left和right */
    background-color: tomato;
}
 
.left {
    width: 300px;
    margin-left: -100%; /* 左侧紧邻container左侧 */
    left: -300px; /* 移至左侧紧邻wrapper最左侧，右侧紧邻container左侧 */
    background-color: lightgreen;
}
 
.right {
    width: 200px;
    margin-left: -200px; /* 右侧紧邻container右侧 */
    right: -200px; /* 移至右侧紧邻wrapper最右侧 */
    background-color: lightskyblue;
}

<div class="wrapper">
    
    <div class="center-wrapper">
        <div class="center">1111111</div>
    </div>
 
    <div class="left"></div>
    <div class="right"></div>
 
</div>

.wrapper {
    height: 500px;
}
 
.center-wrapper,
.left,
.right {
    float: left;
    height: 500px;
}
 
.center-wrapper {
    width: 100%;
    background-color: tomato;
}
 
.left {
    width: 300px;
    margin-left: -100%;
    background-color: lightgreen;
}
 
.right {
    width: 200px;
    margin-left: -200px;
    background-color: lightskyblue;
}
 
.center {
    margin-left: 300px;
    margin-right: 200px;
    height: 500px;
}