方法一：自身浮动法。左栏左浮动，右栏右浮动

<style type='text/css'>
.left , .right{
            height: 300px;
            width: 200px;
        }
        .right{
            float: right;
            background-color: red;
        }
        .left{
            float: left;
            background-color: #080808;
        }
        .middle{
            height: 300px;
            margin: 0 200px;//没有这行，当宽度缩小到一定程度的时候，中间的内容可能换行
            background-color: blue;
        }
</style>

方法二：margin负值法

<style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .left , .right{
                height: 300px;
                width: 200px;
                float: left;
            }
            .right{
                margin-left: -200px;
                background-color: red;
            }
            .left{
                margin-left: -100%;
                background-color: #080808;
            }
            .middle{
                height: 300px;
                width: 100%;
                float: left;
                background-color: blue;
            }
</style>


    <!--放第一行-->

    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>

方法三：绝对定位法。左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离

<style>
    body{
        margin: 0;
        padding: 0;
    }
    .left , .right{
        top: 0;
        height: 300px;
        width: 200px;
        position: absolute;
    }
    .right{
        right: 0;
        background-color: red;
    }
    .left{
        left: 0;
        background-color: #080808;
    }
    .middle{
        margin: 0 200px;
        height: 300px;
        background-color: blue;
    }
</style>


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

<!--这种方法没有严格限定中间这栏放置何处-->

<div class="middle">middle</div>

<div class="right">right</div>