css清除浮动的方法

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> 

 

转载于:https://my.oschina.net/u/3729167/blog/1576745