html清除浮动后样式依旧错误。。怎么破，求解
html代码如下：
<div class="right clearfix">
<div class="top">
<ul class="clearfix">
<li>夜空中最亮的星 |</li>
<li>送别 |</li>
<li>没有什么不同 |</li>
</ul>
</div>
<div class="bott clearfix">
<ul class="clearfix">
<li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
</ul>
</div>
</div>
css样式代码如下：
.right{
float:right;
}
.right .top{
width:750px;
height:60px;
line-height:60px;
border:2px solid #F66;
margin-bottom:15px;
}
.top ul{
padding-left:15px;
}
.top ul li{
float:left;
width:240px;
margin-bottom:15px;
border:1px solid #3CC;
}
.right .bott{
width:750px;
border:2px dashed #F3C;
padding-top:20px;
}
.bott ul{
margin-bottom:20px;
}
.bott ul li{
float:left;
margin-bottom:20px;
margin-left:20px;
height:220px;
width:220px;
}
.bott ul li img{
width:220px;
height:220px;
}
.footer{
margin:auto 30px;
background:#3F6;
}
.clearfix:after{
content".";
display:block;
height:0px;
clear:both;
visibility:hidden;
显示的结果是我右边部分的框压根就没有框住所有的li。。。图片传不上。。郁闷
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.right{
float:right;
}
.right .top{
width:750px;
height:60px;
line-height:60px;
border:2px solid #F66;
margin-bottom:15px;
}
.top ul{
padding-left:15px;
}
.top ul li{
float:left;
width:240px;
margin-bottom:15px;
border:1px solid #3CC;
}
.bott{
float:left;
width:750px;
border:2px dashed #F3C;
}
.bott ul{
float:left;
margin:0;
padding:0;
list-style:none;
background-color:#f00;
}
.bott li{
float:left;
margin:0;
padding:10px;
height:220px;
width:220px;
background-color:#ddd;
}
.bott li img{
width:220px;
height:220px;
background-color:#fff;
border:1px solid #ccc;
display:block;
}
.footer{
margin:auto 30px;
background:#3F6;
}
.clearfix:after{
content".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
</style>
</head>
<body>
<div class="right clearfix">
<div class="top">
<ul class="clearfix">
<li>夜空中最亮的星
[解决办法]
</li>
<li>送别
[解决办法]
</li>
<li>没有什么不同
[解决办法]
</li>
</ul>
</div>
<div class="bott">
<ul>
<li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
</ul>
</div>
</div>
</body>
</html>
[解决办法]
<div class="bott">
<ul>
<li><img src="img/1.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/2.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/3.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/4.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/5.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/6.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/7.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/10.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
<li><img src="img/15.jpg" alt="html清除浮动后样式依旧异常。如何破，求解"></li>
</ul>
<!-- 一般我是这样弄 -->
<div style="clear:both"></div>
</div>
[解决办法]
当你想子盒子浮动时，最好也设置父盒子浮动，让它们在同一层次上，，父盒子的大小才会跟着改变，