双飞翼布局

双飞翼布局（优化圣杯）

双飞翼最早由淘宝团队提出，是针对圣杯布局的优化方案。

主要是优化了圣杯布局中开启定位的问题

---

  		.left,
        .right,
        .center {
            height: 300px;
            float: left;
        }

        .left,
        .right {
            width: 300px;
        }

        .left {
            background-color: chocolate;
            /*将当前元素从当前行，移动上一行同一个位置*/
            margin-left: -100%;
        }

        .center {
            background-color: aquamarine;
            /*宽度为父元素的100%*/
            width: 100%;
            /* margin-left: 300px;
            margin-right: 300px; */
        }

        .right {
            background-color: darkgrey;
            margin-left: -300px;
        }

        .parent {
            height: 300px;
        }

       .inner {
            height: 300px;
            background-color: darkcyan;
            /*对应的是left元素的宽度*/
            margin-left: 300px;
            /*对应的是right元素的宽度*/
            margin-right: 300px;
        }

	<div class="parent">
        <div class="center">
            <div class="inner"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

只是在中间的自适应中加一个子元素，然后把左边和右边的position删去，也解决了元素重叠的问题

---