两栏布局、三栏（圣杯、双飞翼）布局

1. 两栏布局,左边定宽，右边自适应

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>

 #left{
    float: left;
    width: 200px;
    background: green;
}
#right{
    overflow: hidden;
    background: red;
}

2. 三栏布局

圣杯布局和双飞翼布局：实现三列布局，中间内容宽度自适应，两边内容宽度固定。
预览最终布局效果：

区别如下：
DOM结构不同，相对于圣杯，双飞翼为中间单独添加了一个容器，以便margin为左右留白。
圣杯用padding来为左右留白，双飞翼用margin来为左右留白。
圣杯结合浮动和定位来使左右定位，双飞翼则直接使用浮动来定位。

1. 圣杯布局
HTML出现顺序：main、left、right。先载入主体，再加载侧边栏。

<div class="container">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
 
<style>
    .container{ padding: 0 200px 0 300px; }
    .main{ width: 100%; height: 200px; float: left; background:yellow; }
    .left{ width: 300px; height: 200px; float: left; background: red;
            margin-left: -100%; position:relative; left: -300px; }
    .right{ width: 200px; height: 200px; float:left; background: green;
            margin-left: -200%; position: relative; left: -200px; }

2.双飞翼布局
HTML出现顺序：main、left、right。main中单独加了一个容器。

<div class="container">
    <div class="main"><div class="wrap">Main</div></div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
 
<style>
    .main{ width: 100%; height: 200px; float: left; background: yellow; }
    .wrap{ padding: 0 200px 0 300px }
    .left{ width: 300px; height: 200px; background: red; float: left; margin-left: -100%; }
    .right{ width:200px; height:200px; background:green; float:left; margin-left:-200px; }
<style>