css-圣杯布局

  <style>
   .clearfix::after{
     content: "";
     display: table;
     clear: both;
   }
   .wrap{
     width: 700px;
     margin: 0 auto;
     border: 1px solid red;
   }  
   .top, .foot{
     height: 50px;
     border: 1px solid red;
     background-color: blue;
   }
   .main{
    padding: 0 100px;
    overflow: hidden;
   }
   .main .left,
   .main .content,
   .main .right{
     float: left;
     position: relative;
     background-color: gold;
     margin-bottom: -9999px;
     padding-bottom: 9999px;
   }
   .main .left{
     left: -100px;
     width: 100px;
   }
   .main .content{
    width: 100%;
    margin-left: -100px;
    background-color: red;
   }
   .main .right{
     left: 100px;
     width: 100px;
     margin-left: -100px;
   }
  </style>
</head>





  <div class="wrap">
    <div class="top"></div>
    <div class="main">
      <div class="left">1</div>
      <div class="content clearfix">2</div>
      <div class="right">3</div>
    </div>
    <div class="foot"></div>
  </div>