今天比较忙，但还是挤时间把今天的博客写出来了，下面就赶紧进入正题了ヾ(=^▽^=)ノ

一、两列定宽的页面布局

两列的页面布局是我们经常看见的一种页面结构，（蛤？我的博客首页！）这种布局方式在内容体现上可分为主要内容区域和侧边栏。首先让我们先把HTML的骨架搭好。

<div id="header">这里是头</div>
<div id="container">
    <div class="mainBox">这里是主要内容区域</div>
    <div class="sideBox">这里是侧边栏</div>
</div>
<div id="footer">这里是脚（ps:没脚气，不臭）</div>

好了，骨架已经搭好了，下面开始用我们的CSS给骨架上贴肉了。就从最简单的两列定宽开始吧。在这里两列定宽主要是指将mainBox和sideBox这两个div的宽度值固定。再将它们分别放在内容区域的两侧。我们将container的宽度值设置为950px，高度为250px,上下外边距为10px。mainBox的宽度值设置为680px，高度为250px。sideBox的宽度值设置为270px，高度也为250px。

<style type="text/css">    
    *{
        padding: 0;
        margin: 0;
    }
    #header, #footer{
        width: 950px;
        height: 30px;
        background-color: #E8E8E8;
    }
    #container{
        width: 950px;
        height: 250px;
        margin: 10px 0;
    }
    .mainBox{
        float: left;
        width: 680px;
        height: 250px;
        color: #FFFFFF;
        background-color: #333333;
    }
    .sideBox{
        float: right;
        width: 270px;
        height: 30px;
        color: #FFFFFF;
        background-color: #999999;
    }
</style>

效果如下图：

通过float，一个最简单的两列定宽布局就这么实现了，但是我们在mainBox中添加更多的行呢？

结果，内容超出了容器范围，我们可以用overflow将多余的内容隐藏，但是，我们更想实现高度自适应，高度随着内容而改变。可以把CSS修改成这样：

<style type="text/css">
    ……
    #container{
            width: 950px;
            /*height: 250px;*/
            margin: 10px 0px;
        }
        .mainBox{
            float: left;
            width: 680px;
            /*height: 250px;*/
            color: #FFFFFF;
            background-color: #333333;
        }
        .sideBox{
            float: right;
            width: 270px;
            /*height: 250px;*/
            color: #FFFFFF;
            background-color: #999999;
        }
        #footer{
            clear: both;
        }
    ……
</style>

由于float将div从文档流中脱离，我们给footer添加了清除浮动的效果，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute，positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。更多关于清除浮动的问题会在后面写一篇文章专门介绍。

未添加清除浮动的效果如下图，可以看出，footer这个盒子虽然无视了浮动的元素，但是盒子中的文本还是为浮动的元素让出了位置。

添加清除浮动的效果如下图：

但是我们发现底部的外边距却没有了，这是由于container中元素浮动导致container的高度为0，并没有自适应，如下图：

我们对container清除浮动

<style type="text/css">
    ……
    /*
        #footer{
                clear: both;
            }
    */
    #container:after{
        display: block;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
        clear: both;
        content: "";
    }
</style>

更多关于清除浮动的问题会在后面写一篇文章专门介绍。

此时的效果如下图：

这个时候两列好像是没什么问题了，但是，两列不是等高啊。如果我们将mainBox的宽度增加，会发现出现错位现象：

由此可见，两列定宽的布局方式一个前提要求是，两列的盒模型宽度相加不能超过父级元素的宽度，否则会导致页面发生错位。
如果我们将外边距设置成负值，可以修复这个问题

<style type="text/css">
    ……
    .sideBox{
        float: right;
        width: 270px;
        color: #FFFFFF;
        background-color: #999999;
        margin-left: -100px;
    }
    ……
</style>

如下图所示：

侧边栏回到了原来的位置，（是不是很神奇 O(∩_∩)O）但覆盖了主要内容区域，这并不是我们想要的效果，于是我们利用两列自适应结构来满足我们的要求。

二、两列自适应结构

两列自适应的页面布局方式其实将宽度属性以百分比的形式计算，但该宽度并不是盒模型的总宽度，而是盒模型的内容区域的宽度。

<style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #header, #footer{
            width: 100%;
            height: 30px;
            background-color: #E8E8E8;
        }
        #container{
            margin: 10px 0px;
        }
        .mainBox{
            float: left;
            width: 70%;
            color: #FFFFFF;
            background-color: #333333;
        }
        .sideBox{
            float: right;
            width: 30%;
            color: #FFFFFF;
            background-color: #999999;
            margin-left: -100px;
        }
        #container:after{
            display: block;
            visibility: hidden;
            font-size: 0;
            line-height: 0;
            clear: both;
            content: "";
        }
    </style>

这样就得到我们想要的结果了，具体效果如下：

两页布局就先介绍到这里，今天实在是没时间，就把文章分成两部分，明天填第二部分的坑。先这样吧 ↖(^ω^)↗
ps:昨晚网络出了点问题，今天上午才传上来