圣杯布局和双飞翼布局圣杯布局主要给最外层container 设置 padding-left 和 padding-righ

两栏布局

1 使用Float

<!-- HTML结构 -->
<div class="wrap">
    <div class="left">
        左侧固定内容
    </div>
    <div class="right">
        右侧内容自适应
    </div>
</div>

<style>
    /* 清除浏览器默认边距 */
    * {
        margin: 0;
        padding: 0;
    }
    
    .wrap {
        overflow: hidden;
        border: 1px solid red;
    }
    /* 脱离文档流 */
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background: purple;
    }
    
    .right {
        margin-left: 200px;
        background: skyblue;
        height: 200px;
    }
</style>

2 左侧使用absolute

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}

.wrap {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

3 使用calc()函数

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 双float */
.wrap {
    overflow: hidden;
}

.left {
    float: left;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    float: left;
    background: skyblue;
    height: 200px;
    width: calc(100% - 200px);
}

4 使用弹性布局—flex

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
.wrap {
    display: flex;
}
.left {
    height: 200px;
    background: purple;
    flex:0 0 200px
}
.right {
    background: skyblue;
    height: 200px;
    flex: 1;
}

三栏布局

flex布局使用flex布局显得更加简单易懂，原理就是将容器设置为display: flex;

两侧设置固定宽度,并不允许弹性缩放flex: 0; flex-basis: 200px;

中间允许弹性缩放，不设置宽度flex:1;

圣杯布局：

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局（想象一下圣杯是主体是加上两个耳朵；鸟儿是身体加上一对翅膀）

1.三列布局，中间宽度自适应，两边定宽；
2.中间栏要在浏览器中优先展示渲染；
3.允许任意列的高度最高；

圣杯布局主要给最外层container 设置 padding-left 和 padding-right，然后通过position:relative 让左边的盒子挤到设置的padding-left的区域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之圣杯布局</title>
    <style type="text/css">
        .container{
            padding-left: 200px;
            padding-right: 300px;
        }
        .left, .content, .right {
            float: left;
            min-height: 130px;
        }
        .left {
            margin-left: -100%;
            background: green;
            width: 200px;
            position: relative;
            right: 200px;
        }
        .right {
            margin-right: -300px;
            background-color: red;
            width: 300px;
        }
        .content{
            width: 100%;
            background-color: gray;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
</body>
</html>

双飞翼布局

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。不同在于解决 “中间栏div内容不被遮挡”问题的思路不一样。

<div class="container"> 
    <div class="main">
        <div class="content">main</div> 
    </div>
    <div class="left">left</div> 
    <div class="right">right</div> 
</div>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>实现三栏水平布局之双飞翼布局</title>
    <style type="text/css">
    .left, .main, .right {
        float: left;
        min-height: 130px;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        background: green;
        width: 200px;
    }

    .right {
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 300px 0 200px;
    }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="main">
            <div class="content">main</div> 
        </div>
        <div class="left">left</div> 
        <div class="right">right</div> 
    </div>
</body>
</html>

双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。