基于浮动的二列布局

<header>页眉</header>
    <div class="wrap">
        <aside>侧边栏</aside>
        <main>主题内容区</main>
    </div>
    <footer>页脚</footer>

<style>
        header,
        footer,
        aside,
        main{
            background-color:gainsboro;
        }
        header,
        footer{
            height: 50px;
        }
        /* 不注释这个侧边栏和主题内容区不能放在同一行 */
        /* aside,
        main{
            min-width: 700px;
        } */
        .wrap{
            width: 1000px;
            border: 1px solid #000;
            /* 如果需要，内容将被剪裁以适合填充框。 不提供滚动条。scroll */
            overflow: hidden;
            margin: 10px auto;
        }
        aside{
            width: 200px;
            float: left;
        }
        main{
            width: 700px;
            float: right;
        }
    </style>