实现三列布局

1：三布局中的左侧自适应，中间定宽，右侧自适应

<style>

        .clearfloat{
        zoom:1;
        }
        .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        height: 0;
        line-height: 0;
        visibility: hidden;
        }
        .container{
          text-align: center;
        }
        .leftbox{
          width:70%;
          float: left;
        }
        .mainbox{
          float: left;
          margin-left:-100px;
          width: 100px;
          background: red;
        }
        .submainbox{
          float: left;
          width: 100%;
        }
        .submainbox_content{
          margin-right:100px;
          background: lightgreen;
        }
        .sidebox{
          width: 30%;
          float: left;
          background: yellow;
        }

</style>

<div class="container clearfloat">
        <div class="leftbox clearfloat">
          <div class="submainbox"><div class="submainbox_content">次要内容区域</div></div>
          <div class="mainbox">主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域主要内容区域</div>
        </div>
        <div class="sidebox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏</div>
      </div>