div清除浮动

写道

div清除浮动

方法一：
<style>
.container{
  width:100px;
  over-flow:auto;
  border:1px solid blue;
}
.box{
float:left; 
width:30px;
height:30px;
border:1px solid red;
}
.clear{
  clear:both;
}
</style>
<div id="container" class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="clear"></div>
</div> 

方法二：
<style>
.container{
   width:100px;
   over-flow:auto;
   border:1px solid blue;
}
.box{
float:left; 
width:30px;
height:30px;
border:1px solid red;
}
.clearfix:before, .clearfix:after{
     display:table;
    content:''
}
.clearfix:after{
  clear:both;
}
.clearfix{
 
}
</style>
<div id="container" class="container clearfix">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
<div class="box"></div>  
</div> 
<br/>
<div style="position: relative;width:1000px;height:1000px;border:1px solid red; background: url(algerian2.jpg)  no-repeat; background-size: cover;  -ms-behavior: url(backgroundsize.min.htc);">
</div>