三栏布局之（圣杯布局和双飞翼布局）圣杯布局和双飞翼布局的目的？三栏布局，中间一栏最先加载和渲染（内容最重要）两侧内

圣杯布局和双飞翼布局的目的？

三栏布局，中间一栏最先加载和渲染（内容最重要）,两侧内容固定，中间内容随着宽度自适应,一般用于PC网页

圣杯布局和双飞翼布局的技术总结

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

3 如何实现圣杯布局？

html

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="center">c</div>
        <div class="left">l</div>
        <div class="right">r</div>
    </div>
    <div class="footer">footer</div>

</body>

css

.header,
        .footer {
            width: 100%;
            background-color: bisque;
        }

        .footer {
            clear: both;
        }

        .container {
            width: 100%;
            padding-left: 200px;
            padding-right: 150px;
            box-sizing: border-box;
        }


        .center {
            float: left;
            width: 100%;
            background-color: aqua;
        }

        .left {
            float: left;
            width: 200px;
            background-color: blueviolet;
            position: relative;
            right: 200px;
            margin-left: -100%;
        }

        .right {
            float: left;
            width: 150px;
            background-color: brown;
            margin-right: -150px;
        }

圣杯布局效果图： html

<body>
    <div class="header" class="f">header</div>
    <div class="main">
        <div class="main-wrap">
            main-wrap
        </div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="footer" class="f">footer</div>
</body>

css

<style>
        body {
            min-width: 550px;
        }

        .f {
            width: 100%;

            background-color: rgb(70, 167, 167);
        }

        .main {
            width: 100%;
            height: 200px;
            background-color: antiquewhite;
            float: left;
        }

        .main-wrap {
            height: 200px;
            margin: 0 190px;
            background-color: blue;

        }

        .left {
            width: 190px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-left: -100%;

        }

        .right {
            width: 190px;
            height: 200px;
            background-color: blueviolet;
            float: left;
            margin-left: -190px;

        }
    </style>

双飞翼布局效果图：