欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

div清除浮动  

程序员文章站 2022-03-03 17:37:00
...
写道
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>