求助，关于浮动

先上图

不感兴趣

开通SVIP免广告

然后是代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="xiouji.css">
<style type="text/css">
body{
margin: auto;
height: 1200px;
width: 80%;
}
#main{
margin:0;
height: 1200px;
width: auto;
}
#head{
width: 100%;
height: 10%;
background-color: #4169E1;
}
#menu{
width: 20%;
height: 80%;
background-color: aquamarine;
float: left;
}
#content{
width: 80%;
height: 80%;
background-color: #6495ED;
float: left;
}
#buttom{
width: 100%;
height: 10%;
background-color: black;
clear: both;
}
a{
text-decoration:none
}

</style>
</head>
<body>
<div id="main">
<div id="head">
<div id="logo"></div>
<div id="search"></div>
</div>
<div id="menu">
<div id="menu1">1</div>
<div id="menu2">2</div>
<div id="menu3">3</div>
<div id="menu4">4</div>
<div id="menu5">5</div>
<div id="menu6">6</div>
<div id="menu7">7</div>
<div id="menu8">8</div>
<div id="menu9">9</div>
<div id="menu10">10</div>
<div id="menu11">11</div>
<div id="menu12">12</div>
<div id="menu13">13</div>
<div id="menu14">14</div>
<div id="menu15">15</div>
<div id="menu16">16</div>
<div id="menu17">17</div>
<div id="menu18">18</div>
<div id="menu19">19</div>
<div id="menu20">20</div>
</div>
<div id="content">
<div id="buttom">底部</div>
</div>
</body>
</html>

#menu1{
height: 5%;
background-color: #EEE0E5;
}
#menu2{
height: 5%;
background-color: #EED5D2;
}
#menu3{
height: 5%;
background-color: #EECBAD;
}
#menu4{
height: 5%;
background-color: #EEB422;
}
#menu5{
height: 5%;
background-color: #EECBAD;
}
#menu6{
height: 5%;
background-color: #EE82EE;
}
#menu7{
height: 5%;
background-color: #EE7942;
}
#menu8
{
height: 5%;
background-color: #EE6A50;
}#menu9
{
height: 5%;
background-color: #EE3B3B;
}#menu10
{
height: 5%;
background-color: #EE1289;
}#menu11
{
height: 5%;
background-color: #EBEBEB;
}#menu12
{
height: 5%;
background-color: #E6E6FA;
}#menu13
{
height: 5%;
background-color: #E0EEEE;
}#menu14
{
height: 5%;
background-color: #DEDEDE;
}#menu15
{
height: 5%;
background-color: #DC143C;
}#menu16
{
height: 5%;
background-color: #DA70D6;
}#menu17
{
height: 5%;
background-color: #D4D4D4;
}#menu18
{
height: 5%;
background-color: #D1EEEE;
}#menu19
{
height: 5%;
background-color: #CFCFCF;
}#menu20
{
height: 5%;
background-color: #CDC9C9;
}