浮动出现异常
为什么我的浮动样式成这个样子了?谁能告诉我。
<style type="text/css">
*{margin:0 ;padding:0;font-size:14px;list-style:none;font-family:Verdana, Geneva, sans-serif,"宋体";color:#323232}
h2{
line-height:20px;
border-bottom:1px solid #cce6f5;
margin-bottom:10px;
}
h2 span{float:right;}
h2 span a{font-size:12px;font-weight:normal;}
#wrap{
margin:0 auto;
width:910px;
}
#header,#container{
width:100%;
overflow:hidden;
margin-bottom:10px;
}
.logo{
margin:5px;
width:100%;
overflow:hidden;
}
.logo h1{
background:url(../images/logo.gif) no-repeat;
height:66px;
width:218px;
float:left;
text-indent:-99px;
cursor:pointer;
}
.logo dl{
float:right;
marign:10px;
}
.logo dt{
font-weight:bold;
line-height:30px;
color:#5a5a5a;
}
.logo dd{
font-size:12px;
color:#999;
line-height:24px;
}
#nav{
width:100%;
background:url(../images/navbg.gif) no-repeat;
float:left;
height:36px;
}
#nav ul{
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#nav li{
display:inline;
float:left;
font-weight:bold;
font-color:white;
line-height:36px;
margin:0 20px;
}
#nav li a{
color:#FFF;
}
#nav a:link,a:visited{
text-decoration:none;
}
#nav li.app{
background:url(../images/home.gif) 0 4px no-repeat;
text-align:center;
width:88px;
}
#nav li.app a{color:#000;}
#nav li.suv{
float:right;
background:url(../images/arrow_r.gif) 0px 8px no-repeat;
padding-left:25px;
}
.content{
float:left;
width:600px;
}
.photo{margin:12px 2px;}
.box{width:100%;overflow:hidden;margin-bottom:15px;}
.list{width:100%;overflow:hidden;}
.list li{width:100%;margin-bottom:15px;overflow:hidden;}
.list li dl{float:left;padding-left:45px;}
.list li dt{font-size:12px; color:#828282; line-height:26px;}
.list li dt a{font-weight:bold;text-decoration:underline;margin-right:10px;}
.list li dt a:hover{text-decoration:none;}
.list li dd{line-height:24px;}
.list li span{float:right; font-size:12px; color:#630063; margin-top:5px;}
.list li span a{text-decoration:underline; font-size:12px; color:#63C}
.list li span a:hover{text-decoration:none;}
.new{background:url(../../style/images/new.gif) right 5px no-repeat;padding:10px;}
.download{background:url(../../style/images/downicon.gif) 0 6px no-repeat;padding:3px 0 0 15px;}
.soft_1{background:url(../../style/images/icon_1.gif) 0 5px 0 no-repeat;}
.soft_2{background:url(../../style/images/icon_2.gif) no-repeat;}
.soft_3{background:url(../../style/images/icon_3.gif) 0 5px no-repeat;}
.soft_4{background:url(../../style/images/icon_4.gif) 0 5px no-repeat;}
.soft-5{background:url(../../style/images/icon_5.gif) 0 5px no-repeat;}
.soft_6{background:url(../../style/images/icon_6.gif) 0 5px no-repeat;}
.sidebor{float:right;width:280px;}
.sidebor li a{font-size:12px;color:#06C;}
.newlist{width:100%;}
.newlist li{line-height:22px;}
.downlist{width:100%;overflow:hidden;}
.downlist li{width:100%;overflow:hidden;line-height:25px;padding-left:23px;margin-bottom:5px;}
.downlist li span {float:right;color:#039;font-size:12px;}
.downlist li span a{font-size:12px;text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;}
.picture_1{background:url(../../style/images/soft_r_1.gif) no-repeat;}
.picture_2{background:url(../../style/images/soft_r_2.gif) 0 5px no-repeat;}
.picture_3{background:url(../../style/images/soft_r_3.gif) 0 5px no-repeat;}
.picture_4{background:url(../../style/images/soft_r_4.gif) 0 5px no-repeat;}
.picture_5{background:url(../../style/images/soft_r_5.gif) 0 5px no-repeat;}
.picture_6{background:url(../../style/images/soft_r_6.gif) 0 5px no-repeat;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">
<h1><a href="#">腾讯软件中心</a></h1>
<dl>
<dt>
腾讯软件中心,腾讯精品软件展示平台
</dt>
<dd>
我们会不断提升产品的性能和体验,为您提供最好用的软件!
</dd>
</dl>
</div>
</div>
<div id="nav">
<ul>
<li class="app"><a href="#">首页</a></li>
<li><a href="#">PC产品大全</a></li>
<li><a href="#">Mac产品大全</a></li>
<li><a href="#">无线产品大全</a></li>
<li><a href="#">企业产品大全</a></li>
<li class="suv"><a href="#">QQ实验室</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="content">
<img src="../images/banner.png" width="600" height="200" class="photo" />
<div class="box">
<h2>
<a href="#">腾讯软件</a>
<span>
<a href="#">更多>></a>
</span>
</h2>
<ul class="list">
<li>
<dl class="soft_1">
<dt><a href="#">QQ5.2</a>更新日期: 2014-03-17</dt>
<dd>免费的即时通讯平台,带来更多沟通乐趣。</dd>
</dl>
<span>
<a href="#" class="download">下载</a>| <a href="#">官方网站</a>
</span>
</li>
<li>
<dl class="soft_2">
<dt>
<a href="#" class="new">腾讯电脑管家</a>
更新日期:2014-1-15
</dt>
<dd>专业的免费杀毒软件,全面便捷管理电脑。</dd>
</dl>
<span>
<a href="#" class="download">下载</a>|<a href="#">官方网站</a>
</span>
</li>
<li>
<dl class="soft_3">
<dt>
<a href="#">软件管理</a>更新时间: 2014-01-27
</dt>
<dd>下载软件,就用软件管理</dd>
</dl>
<span>
<a href="#" class="download">下载</a>|<a href="#">官方网站</a>
</span>
</li>
<li>
<dl class="soft_4">
<dt>
<a href="#" class="new">QQ音乐2014贺岁版</a>更新时间: 2014-01-24
<dd>全新界面设计,视野更开阔,操作更简单</dd>
</dt>
</dl>
<span>
<a href="#" class="download">下载</a>|<a href="#">官方网站</a>
</span>
</li>
<li>
<dl class="soft-5">
<dt>
<a href="#">QQ浏览器</a>
更新时间:2014-03-13
</dt>
<dd>全新设计,简约轻快,精巧易用</dd>
</dl>
<span>
<a href="#" class="download">下载</a>|<a href="#">官方网站</a>
</span>
</li>
<li>
<dl class="soft_6">
<dt>
<a href="#">QQ影像</a>更新时间:2014-01-24
</dt>
<dd>管理、浏览、编辑、上传一站体验</dd>
</dl>
<span>
<a href="#" class="download">下载</a>|<a href="#">官方网站</a>
</span>
</li>
</ul>
</div>
</div>
<div class="sidebor">
<div class="box">
<h2>最新动态</h2>
<ul class="newlist">
<li>·<a href="#">腾讯电脑管家8.0正式版发布</a></li>
<li>·<a href="#">腾讯游戏平台首推强加速、LOL助手永久免费</a></li>
<li>·<a href="#">微云2.0六大终端全新出击,超强收藏功能</a></li>
<li>·<a href="#">腾讯手机管家(PC版)2.0新版 只为用户更好体验</a></li>
<li>·<a href="#">QQ影音3.7发布,提升转码速度</a></li>
<li>·<a href="#">QQ2012 Beta2(Q+):全新Q+,更快更便捷</a></li>
<li>·<a href="#">Foxmail 7发布新版本,支持繁、简、英多语言</a></li>
</ul>
</div>
<div class="downlist">
<div class="box">
<h2>
<a href="#">更多推荐</a><span><a href="#">更多>></a></span>
</h2>
<ul>
<li class="picture_1">
<a href="#">QQ旋风</a>
<span><a href="#" class="download">下载</a></span>
</li>
<li class="picture_2">
<a href="#">腾讯视频播放器</a>
<span><a href="#" class="download">下载</a></span>
</li>
</ul>
</div>
</div>
</body>
</html>