结合CSS3的布局新特征谈谈常见布局方法

    #main {   
        overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/  
        zoom: 1;/*低版本ie下:触发haslayout属性,修整由子元素浮动引起的高度塌陷问题*/  
        /*将主体部分左右侧预留出左右边栏大小的空白位置*/  
        padding: 0 300px 0 220px;    
    }   
    .m_content, .m_leftside, .m_rightside {   
        float: left;   
        /*目的是将左右侧边栏拉回*/  
        position: relative;   
    }   
    .m_content {   
        width: 100%;   
    }   
    .m_leftside {   
        width: 220px;   
        /*由于m_content占据了100%空间，所以需要用负的margin值将左边栏拉回*/  
        margin-left: -100%;   
        /*将主体部分预留的左侧补白区域填充满*/  
        left: -220px;   
    }   
    .m_rightside {   
        width: 300px;   
        /*用负的margin值将右边栏拉回自身大小个像素单位*/  
        margin-left: -300px;   
         /*将主体部分预留的右侧补白区域填充满*/  
        left: 300px;   
    }   
</style>   
  
<div id="main">   
    <div class="m_content">这里是主体</div>   
    <div class="m_leftside">这是左侧边栏</div>   
    <div class="m_rightside">这是右侧边栏</div>   
</div>   
  

以上就是圣杯布局方法，基本思路是运用浮动加定位的方法，缺点是代码较复杂，不能模拟三栏等高效果。