CSS经典布局方案 圣杯布局+双飞翼布局

圣杯布局

最终效果展示
结构

    <div id="container">
        <div id="center" class="column">#center</div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
    </div>

原理:基于浮动和负边距
center放在最上面 三个盒子动浮动起来 center最先渲染 宽度设置为width:100%;

css样式

 .column {
 		float:left;
        height: 200px;
    }
    
    #center {
        width: 100%;
        background-color: tomato;
    }
    
    #left {
        width: 200px;
        background-color: lightgreen;
    }
    
    #right {
        width: 200px;
        background-color: skyblue;
    }

这样left 和right盒子就被挤到下一行了

下一步要让left 和 right盒子上去 用.left{margin-left:-100%} .right{margin-left:-200px}

 		 #left {
            width: 200px;
            height: 200px;
            margin-left: -100%;
            background-color: lightgreen;
        }
        
        #right {
            width: 200px;
            height: 200px;
            margin-left: -200px;
            background-color: skyblue;
        }

这时候中间的盒子内容会被左右两边压住
先让中间自适应的盒子安全显示 .container {padding:0 200px}
要给左右盒子加一个定位 position:relative ;left:-200px

最终效果

双飞翼布局

原理
这种布局方式看起来跟圣杯模式没啥区别，但是他们实现的方式是有区别的，前者是center、left、right在一个container内，这样left在浮动的时候第一次只能浮动到center的左上角，而后者直接将container浮动起来了，因为container内只有一个center，这样只用margin-left:-100% 就可以实现left去到左上角，而且right也是相对于container来浮动的，所以就直接margin-left:-200px就OK了。

 	<div class="container column">
        <div class="center"></div>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>

  .container {
            width: 100%;
            float: left;
            height: 200px;
            background-color: tomato;
        }
        
        .center {
            width: 100%;
            margin-left: 200px;
            margin-right: 200px;
        }
        
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: lightgreen;
        }
        
        .left {
            margin-left: -100%;
        }
        
        .right {
            margin-left: -200px
        }