css-float布局-经典双飞翼布局

<style type="text/css">
      body {
        min-width: 550px;
      }
      #main {
        width: 100%;
        height: 200px;
        background-color: #ccc;
      }
      #main-wrap {
        margin-left: 190px;
        margin-right: 190px;
      }
      #left {
        background-color: yellow;
        width: 190px;
        height: 200px;
        margin-left: -100%;
      }
      #right {
        background-color: yellowgreen;
        width: 190px;
        height: 200px;
        margin-left: -190px;
      }
      .col {
        float: left;
      }
      #header {
        text-align: center;
        background-color: #f1f1f1;
        height: 30px;
      }
      #footer {
        /* clear: both; */
        text-align: center;
        background-color: #f1f1f1;
        height: 30px;
      }
    </style>

<div id="header">header</div>
    <div id="main" class="col">
      <div id="main-wrap">main</div>
    </div>
    <div id="left" class="col">left</div>
    <div id="right" class="col">right</div>
    <div id="footer">footer</div>

双飞翼布局效果如下图：