【css】圣杯布局、双飞翼布局

圣杯布局 

 

        圣杯布局，即三栏分布，中间栏可以满足自适应调节，两边分栏定宽的布局效果。因此，中间栏需要优先于两边栏渲染以保证内容的完全展现。

初始化html页面：

<header>header</header>
    <div class="main clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
<footer>footer</footer>

 步骤：

1. 先渲染header、footer、center、left、right的背景样式、宽度、高度
2. 给中间区域的三个标签添加浮动 { float: left; }，此时页脚footer会由于浮动页面塌陷导致上移，需要给中心区域清除浮动 clearfix
3. 给left元素添加 { margin-left: -100%; } ，给right元素添加 { margin-left: -100px; } ,并给父元素main添加padding，padding宽度即为左右标签的但宽度值。
4. 给左右标签添加相对定位，左侧盒子添加{ left: -100px; }，右侧盒子添加{ right: -100px; }
5. 给中心center区域添加宽度，根据浏览器变化而改变。

整体css样式： 

        * {
            margin: 0;
            padding: 0;
        }
        header,footer {
            background-color: #aaa;
            width: 100%;
            text-align: center;
        }
        .main {
            padding: 0 100px;
            /* width: 100%; */
            text-align: center;
        }
        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }
        .center {
            float: left;
            height: 200px;
            background-color: pink;
            width: 100%;
        }
        .left,.right {
            float: left;
            position: relative;
            width: 100px;
            background-color: #cc2255;
            height: 200px;
        }
        .left {
            margin-left: -100%;
            left: -100px;
        }
        .right {
            margin-left: -100px;
            right: -100px;
        }
        

 双飞翼布局 

        双飞翼布局，也是三栏分布，中间栏可以满足自适应调节，两边分栏定宽的布局效果。双飞翼布局就是在圣杯布局的上进行完善， 减少了一定的代码量。

<header>header</header>
<div class="main clearfix">
    <div class="center">center</div>     
</div>
<div class="left">left</div>
<div class="right">right</div>
<footer>footer</footer>

        双飞翼布局是在center的外层另外添加了一个容器，不需要相对定位，但需要对页脚进行清除浮动，以抵消中心区域全部浮动的影响。

        * {
            margin: 0;
            padding: 0;
        }
        header,footer {
            background-color: #aaa;
            width: 100%;
            text-align: center;
            height: 50px;
        }
        .main {
            width: 100%;
            text-align: center;
            float: left;
        }
        /* .clearfix::after {
            content: "";
            display: block;
            clear: both;
        } */
        .center {
            margin: 0 100px;
            height: 200px;
            background-color: pink;
        }
        .left,.right {
            float: left;
            width: 100px;
            background-color: #cc2255;
            height: 200px;
        }
        .left {
            margin-left: -100%;
        }
        .right {
            margin-left: -100px;
        }
        footer {
            clear: both;
        }

 以上两种布局均可以实现以下效果

总结：

1. 圣杯布局的html代码清晰，便于区分结构，但css代码较为复杂，既使用了浮动又使用了相对定位，后续还需要对部分结构进行浮动的清除。
2. 双飞翼布局html结构嵌套相对复杂一点，结构并没有圣杯布局的清晰，但只使用了浮动。