如何解決二級標簽對另一級的div布局的影響
就是在設(shè)置好二級菜單后，在下面的中間布局中有三列，都是浮動的，當二級菜單展開后會是中間的布局收到影響，怎么解決”
我的代碼如下：
<!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=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
#all{width:666px;margin:0 auto;background-color:#99FFFF}
#head{}
#logo{float:left;}
#login{float:right;}
#pop{position:absolute;margin-top:50px;margin-left:250px;}
#nav ul li{width:80px;}
#nav ul{border-bottom:6px #FFCC33 solid;padding-bottom:6px;}
#nav ul li a{width:80px;}
#left{background-color:#3366CC;width:222px;float:left;}
#zhong{background-color:#3333FF;width:222px;float:left;}
#bottom{background-color:#FF9999;width:222px;float:left;}
#footer{background-color:#999999}
#nav ul li ul{display:none}
#nav ul li:hover ul{display:block;}
#nav ul li ul li{margin-top:1px;background-color:#0099FF;vertical-z:1;}
#nav ul li ul{border:0px;margin-left:-42px;display:none;position:relative;}
li{list-style:none;float:left;margin:0 2px;margin-top:-10px;text-align:center;}
a{text-decoration:none;display:block;}
a:hover{background-color:#FF9900;height:30px;line-height:30px;margin-top:-10px;display:block}
.cheng{background-color:#FF9900;margin-top:-20px;line-height:30px;height:30px;position:relative;}
.STYLE1 {
color: #660066;
font-size: x-large;
font-family: "新宋體";
}
</style>
</head>
<body>
?<div id="all">
? <div id="head">
<div id="logo"><img src="logo.png" /></div>
<div id="login">
<ul>
<li ><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
<li><a href="#">login</a></li>
</ul>
</div>
<div class="STYLE1" id="pop">歡迎來到IT組?。?！</div>
<div style="clear:both"></div>
<div id="nav">
<ul>
<li class="cheng"><a href="#">菜單</a></li>
<li><a href="#">菜單</a></li>
<li><a href="#">菜單</a>
<ul>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
<li><a href="#">二級菜單</a></li>
</ul>
</li>
<li><a href="#">菜單</a></li>
<li><a href="#">菜單</a></li>
<li><a href="#">菜單</a></li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">left</div>
<div id="zhong">zhong</div>
<div id="bottom">bottom</div>
</div>
<div style="clear:both"></div>
<div id="footer">footer</div>
?</div>
</body>
</html>
2017-06-10
浮動一下?
2017-06-10
#middle{
float: left;
}
2017-06-10
#middle{
height: 20px;
width: 960px;
float: left;
}