利用伪元素:after 清除浮动

<title>Float</title>  
<style type="text/css">  
ul {  
list-style-type: none;  
width: 800px;  
background: blue;  
}  
li {  
float: left;  
}  
/*利用:after伪元素*/  
.clearUl:after {  
content:"";
display: block;  
clear: both;  
}  
</style>  
   
   
<ul class="clearUl"> <!--为包含的外围元素设置类--> 
<li><img src="1.jpg"></li>  
<li><img src="2.jpg"></li>  
<li><img src="3.jpg"></li>  
<li><img src="4.jpg"></li>  
<li><img src="5.jpg"></li>  
<li><img src="6.jpg"></li>  
</ul>