1、对父级设置适合CSS高度,代码展示如下:
<style>
.div_01{
width:400px;
border:1px solid #F00;
background:#FF0;
height:102px;
}
.div_01-left,.div_02-right{
width:180px;
height:100px;
border:1px solid #00F;
background:#FFF;
}
.div_01-left{
float:left;
}
.div_02-right{
float:right;
}
</style>
<div class="div01">
<div class="div_01-left">left浮动</div>
<div class="div_01-right">right浮动</div>
</div>
2、clear:both清除浮动,代码展示如下:
<style>
.div_01{
width:400px;
border:1px solid #F00;
background:#FF0;
}
.div_01-left,.div_02-right{
width:180px;
height:100px;
border:1px solid #00F;
background:#FFF;
}
.div_01-left{
float:left;
}
.div_02-right{
float:right;
}
.clear{
clear:both;
}
</style>
<div class="div01">
<div class="div_01-left">left浮动</div>
<div class="div_01-right">right浮动</div>
<div class="clear"></div>
</div>
3、父级div定义 overflow:hidden
<style>
.div_01{
width:400px;
border:1px solid #F00;
background:#FF0;
overflow:hidden;
}
.div_01-left,.div_02-right{
width:180px;
height:100px;
border:1px solid #00F;
background:#FFF;
}
.div_01-left{
float:left;
}
.div_02-right{
float:right;
}
</style>
<div class="div01">
<div class="div_01-left">left浮动</div>
<div class="div_01-right">right浮动</div>
</div>