经典圣杯布局 双飞翼布局

https://www.zhihu.com/question/47629826/answer/308816319 css基础

---

解决问题：两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染，左右中三列代表：子列，主列，附加列，优先加载主列，后续子列，附加列

1.圣杯布局

---

• 实现过程-1.HTML标签

<header class="header">#header</header>
<div class="container">
    <div class="main col">#main</div>
    <div class="left col">#left</div>
    <div class="right col">#right</div>
</div>
<footer class="footer">#footer</footer>

• 实现过程-2.css

body{
            min-width:600px;
        }
        .col{
            position: relative;
            float: left;
        }
        .header{
            width:100%;
            height: 30px;
            background-color: #0bffd1;
        }
        .container{
            padding:0px 190px 0 190px;
        }
        .container:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
        }
        .main{
            width: 100%;
            height:400px;
            background-color: #62dbff;
        }
        .left{
            width:190px;
            height: 400px;
            margin-left:-100%;
            left: -190px;
            background-color: #0071e9;
        }
        .right{
            width:190px;
            height:400px;
            margin-left:-190px;
            right: -190px;
            background-color: #0071e9;
        }
        .footer{
            width:100%;
            height: 40px;
            background: #0bffd1;
        }

• 实现原理：
  左、中、右三个div都左浮动，实现在一行显示；给三个div的父级元素 .container添加内边距，左内边距和右内边距分别为左右两个固定div的宽度，中间div放在最前面使其宽度为100%，可优先加载；左侧div添加左负边距为-100%，left：-190px,为左侧div宽度负值，实现靠左且不遮挡container，右侧div右负边距和右距离均为其宽度的负值，实现不遮挡container右侧；最后因为整个container均为浮动，会使得其脱离文本，利用伪类清除浮动；

标签：after{
     content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
}
标签：{zoom:1;}//兼容IE6.7

注意：

after伪类： 元素内部末尾添加内容；
    :after{content"添加的内容";} IE6，7下不兼容

zoom 缩放 
    a、触发 IE下 haslayout，使元素根据自身内容计算宽高。
    b、FF 不支持；

• 实现结果：
• 
  参考：1.http://blog.csdn.net/yinmazuo/article/details/50218657
  2.https://www.jianshu.com/p/f9bcddb0e8b4

2.双飞翼布局

---

• 实现过程-1.div结构

<header class="header">#header</header>
<div class="main col">
    <div class="main-inner">#main</div>
</div>
<div class="sub col">#sub</div>
<div class="extra col">#extra</div>
<footer class="footer">#footer</footer>

- 实现结果-2.css

<style>
        *{margin:0px;padding:0px;}
        body{min-width:600px;}
        .header,.footer{
            width:100%;
            height:30px;
            background: #00ffff;
        }
        .col{float: left;}
        .sub{
            width:200px;
            height: 300px;
            margin-left:-100%;
            background-color: #85a1ff;
        }
        .extra{
            width:200px;
            height: 300px;
            margin-left:-200px;
            background-color: #85a1ff;
        }
        .main{
            width:100%;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 200px;
            height:300px;
            background-color: #cba2ff;
            word-break: break-all;
        }
        .footer{
            clear: both;}
    </style>

• 实现原理：
  头尾及左中右三列并行，与圣杯布局中左中右三列包含在container中不同，使左中右三列左浮动，中间列宽度100%显示，左右宽度固定，使左侧div左外边距为-100%,右侧负左外边距为该div的负宽度，实现两个div浮动在两边，然后使中间div里面的第一层子元素左右外边距分别为左右两个div的宽度，实现中间div不被左右两个div遮挡，最后使footer清除浮动即可；

• 实现结果：

• 总结两个布局实现不同之处：

  1. div布局不同；

  
  2. 中间div不被两侧遮挡的实现方式不同；