Margin负边距使用之双飞翼布局

在页面布局中，经常会遇到左右两边宽度固定中间自适应的布局需要，其中有一个很巧妙的方式叫双飞翼布局。双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法，主要利用了浮动、负边距、相对定位三个布局属性，使三列布局就像小鸟一样，拥有中间的身体和两侧的翅膀。下面是是实现原理：
1 首先给出html的div结构：

<div class="grid">
            <div id="div-middle">div-middle</span></div>
            <div id="div-left"><span>div-left</span></div>
            <div id="div-right"><span>div-right</span></div>
        </div>

2 首先我们将中间元素放在文档流最前面优先渲染，然后使其向左浮动，并设置 width 为 100%，中间占据满列，形成小鸟的身体：

#div-middle {
    float: left;
    background-color:greenyellow;
    width: 100%;
    height: 50px;
}

3 接下来我们开始为小鸟加上双翼，将左右两列元素均设为左浮动，然后通过调整负边距将其定位在各自的位置上：

#div-left{
    float: left;
    background-color: rosybrown;
    width: 150px;
    margin-left: -100%;
    height: 50px;

}

#div-right{
    float: left;
    background-color: lightskyblue;
    width: 200px;
    margin-left: -200px;
    height: 50px;
}

这时候小鸟的双翼就安装成功了，可以试着运行一下，确实是一行三列，两边宽度固定中间自适应，但这里其实是有个问题的，在通常情况下，在第一个div拥有“float:left”属性的情况下，如果这个div把宽度占据较多，余下的位置放不下下一个div，后边的div是会另起一行的，但是这里这个情况并没有发生，有点违背原理的意思。所以我们就不得不注意一下”#div-left”和“div-right”属性列表里的margin-left的负属性值。对负边距的解析：那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。负边距对这些由文档流控制的元素的作用是，会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让文档流的其它元素乘虚而入。而通过负边距进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，在拥有float属性时负边距有另外一个作用，就是使用之后会把后边的元素显示到前边，用覆盖前边的元素的方法取代之前的向下另取一行，所以“div-left”使用了属性：margin-left:100%；之后，“div-left”会偏移到最左边，而且会覆盖掉“div-middle”左边和它重叠的部分，同理“div-right”使用了属性：margin-left:-200px显示在“div-middle”的前边，覆盖掉“div-middle”右边的200px宽度的位置，就显示出我们想要的一行三列两边固定中间自适应样式。
现在我们只需要再修改一下“div-middle”属性，放弃两边被覆盖的部分，就能很好地的到需要的效果，可以在“div-middle”
里包含一个子div元素，设置margin属性让内容显示在我们的视觉区内，代码如下：
CSS代码：

#div-wrap{
            margin: 0 200px 0 150px;
        }

body里的代码：

<div id="div-middle">
    **<div id="div-wrap"><span>div-middle</span></div>**
</div>

基本就大功告成了，总结整个过程，就是先放好身体，再加上翅膀，然后让身体包裹一层骨架，通过骨架将身体定位到正确的位置。