用CSS实现布局（两栏布局，多栏布局）

在网页上的布局比较经典的是两栏布局和三栏布局。下面简单总结自己对这两种布局的实现过程。

两栏布局

两栏布局是主内容区为主，左（右）侧有一栏，代码如下：

         
   
    

    

        

        

            main main main main main main
        
    
    

• 要点：将侧边区块
  域浮动，

  浮动后覆盖绿色

  , 再将

  overflow:auto，形成BFC，形成独立区域，达到效果。

方法二：使用负边距

代码例子：

 
 
    
header
    

        

            

                我是主区块 我是主区块 main main  main
            
        
        

    
    
footer

• 元素content添加父元素，设置左浮动，宽度为100%；
• content 设置右边距，宽度为aside的宽度（留出aside浮上来的空间）；
• aside左浮动，并设置负边距，等于自身宽度。

三栏布局是在两栏的基础上完成：

• content设置左右边距，宽度等于side1宽度，side1左浮动，side1负边距设为-100%。
• side2左浮动，设置负边距等于自身宽度值。