一、浮动布局

左右浮动，中间不浮动，DOM上中间要放在最后。

    <style type="text/css">
        .wrap{
            overflow: hidden;
        }
        .left{
            width: 100px;
            height: 200px;
            float: left;
            background-color: red;
        }
        .right{
            width: 100px;
            height: 200px;
            float: right;
            background-color: red;
        }
        .main{
            height: 200px;
            background-color: #000;
        }
    </style>

    <div class='wrap'>
        <div class='left'></div>
        <div class='right'></div>
        <div class='main'></div>
    </div>

二、定位布局

三个盒子定位都为absolute，左的left：0；右的right：0；中间的left：100px; right : 100px; DOM正常。

    <style type="text/css">
        .wrap{
            overflow: hidden;
        }
        .wrap div{
            position: absolute;
        }
        .left{
            width: 100px;
            height: 200px;
            left: 0;
            background-color: red;
        }
        .right{
            width: 100px;
            height: 200px;
            right: 0;
            background-color: red;
        }
        .main{
            height: 200px;
            left:100px;
            right: 100px;
            background-color: #000;
        }
    </style>

三、flex布局

父元素display : flex；左右定宽，中间flex : 1 ; DOM正常。

    <style type="text/css">
        .wrap{
            display: flex;
        }
        .left,.right{
            background-color: red;
            width: 100px;
            height: 200px;
        }
        .main{
            background-color: #000;
            flex: 1;
        }
    </style>

四、表格布局

父元素diaplsy : table ; 子元素display : table-cell ; 左右设置宽度，DOM正常。

    <style type="text/css">
        .wrap{
            width: 100%;
            display: table;
        }
        .wrap div{
            display: table-cell;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: red;
        }
        .main{
            height: 200px;
            background-color: #000;
        }
    </style>

五、圣杯布局

父元素设置左右padding，并清除浮动；
子元素float : left ; position : relative;
中间元素width : 100% ; 左右定宽；
左元素margin-right : 100% ; left : -100px ; 右元素margin-left: -100px ; right : -100px; DOM正常。

    <style type="text/css">
        .wrap{
            padding: 0 100px 0 100px;
            overflow: hidden;
        }
        .wrap div{
            float: left;
            position: relative;
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: green;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            margin-right: -100%;
            left: -100px;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: red;
            margin-left: -100px;
            right: -100px;
        }
    </style>

六、双飞翼布局

父元素设置左右padding，并清除浮动；
子元素float : left ; position : relative;
中间元素width : 100% ; 设置左右margin;
左右定宽，左元素left : -100px ; 右元素 right : -100px; DOM正常。

    <style type="text/css">
        .wrap{
            padding: 0 100px 0 100px;
            overflow: hidden;
        }
        .wrap div{
            float: left;
            position: relative;
        }
        .main{
            width: 100%;
            height: 200px;
            background-color: green;
            margin: 0 -100px;
        }
        .left{
            width: 100px;
            height: 200px;
            background-color: red;
            left: -100px;
        }
        .right{
            width: 100px;
            height: 200px;
            background-color: red;
            right: -100px;
        }
    </style>