浮動出現異常
為什么我的浮動樣式成這個樣子了？誰能告訴我。
<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>
2016-09-14
你div用的太亂了，一個個都對不上，剛才匹配了一下，給你補一個
</div>
<div class="container">
把這個刪掉就好了，
div嵌套出問題了
2016-09-14
試試把.sidebor設為相對定位。.box的margin-right設置為零，和絕對定位試試