实现两列布局中的一列定宽，一列宽度自适应

1：/*这种方法不能撑开父元素的高度*/(左边定宽，右边宽度自适应)

<div class="container clearfloat">

    <div class="mainbox">主要内容区域</div>
    <div class="sidebox">次要内容区域</div>

</div>

<style>

/*清除浮动*/

.clearfloat{

        zoom:1;

}

.clearfloat:after{

        display:block;

        content:"";

        height:0;

        line-height:0;

        clear:both;

        visibility:hidden;

}

.container{

        position:relative;
}

.mainbox{

        float:left;

        margin-left:200px;
        background: red;

}

.sidebox{

        position:absolute;

        top:0;

        left:0;

        width:200px;

        background:lightgreen;

}

</style>

2：/*能够撑开父元素的高度*/

<div class="container clearfloat">

     <div class="mainbox"><div class="mainbox_content">主要内容区域</div></div>

                <div class="sidebox">次要内容区域</div>

 </div>

<style>

/*清除浮动*/

.clearfloat{

        zoom:1;

}

.clearfloat:after{

        display:block;

        content:"";

        height:0;

        line-height:0;

        clear:both;

        visibility:hidden;

}

.container{

        text-align:center;

}

.mainbox{

        float:left;

        width:100%;

}

.mainbox_content{

        margin-left:280px;

        background:lightgreen;

}

.sidebox{

        float:left;

        width:280px;

        margin-left:-100%;

        background:yellow;

}

</style>