CSS-float布局-经典圣杯布局

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

      /* 手写clearfix */
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
    </style>

<div id="header">header</div>
    <div id="containter" class="clearfix">
      <div id="center" class="column">center</div>
      <div id="left" class="column">left</div>
      <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>

圣杯布局效果如下图：