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>