页面布局之两列式布局

定义：两列式布局方式在内容上分为主要内容区域和侧边栏。一般情况下该布局的两列宽度具有一定的
![Uploading YFC~A8SV0@){ID}KWE}U0%7_135720.png . . .]
固定值，不同的是主要内容区域及侧边栏的位置。

示例图如下：

Paste_Image.png

注：这是两列定宽布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列式页面布局</title>
    <style type="text/css">
        /*一.两列定宽布局*/
        /*两列定宽布局主要是指将mainBox及sideBox这两个div标签的宽度值固定，再将其控制在页面内容区域中的左右两侧。*/
        *{padding: 0;margin: 0;}
        .header,.footer{
            width: 100%;
            height: 100px;
            background: #ccc;
        }
        .container{
            width: 960px;
            height: 600px;
            margin: 10px auto;
        }
        .mainBox{
            float: left;
            width: 750px;
            height: 600px;
            color: #000;
            background: #faf;
        }
        .sideBox{
            float: right;
            width: 200px;
            height: 400px;
            background:#3f0;
        }
        .container:after{
            display: block;
            visibility: hidden;
            content: "";
            clear: both;
        }
        /*
            注意事项：
            1.清浮动；
            2.为了能够实现自适应高度的效果，需要将样式中内容区域的高度删除，这样随意在html代码的mainBox容器中或者sideBox容器中添加内容，都不有文字溢出现象。
            3.两列定宽的布局方式要求两列的盒模型宽度相加不能大于父级的宽度，否则将会导致页面内的错位现象。
        */
    </style>
</head>
<body>
    <!--    
        两列式布局方式在内容上分为主要内容区域和侧边栏。一般情况下该布局的两列宽度具有一定的固定值，不同的是主要内容区域及侧边栏的位置。
     -->
     <div class="header">头部信息</div>
     <div class="container">
        <div class="mainBox">主要内容区域</div>
        <div class="sideBox">侧变脸</div>
     </div>
     <div class="footer">底部信息</div>
</body>
</html>