利用浮动元素布局，代码中我的右中怎么显示不出来
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>利用浮动元素尝试页面布局</title>
<style type="text/css">
/*清楚固有样式*/
* {
padding:0;
margin:0;
}
/*设置头部div*/
.header{
margin-top:200px;
width:1000px;
height:100px;
background-color:yellow;
/*设置居中*/
margin:0 auto;
}
/*设置content div*/
.content{
width:1000px;
height:400px;
background-color:orange;
/*设置居中*/
margin:10px auto;
}
/*设置左中div*/
.left{
width:200px;
height:400px;
background-color:skyblue;
/*设置左浮动*/
float:left;
}
/*/*设置center div/*/
.center{
width:580px;
height:400px;
background-color:green;
/*设置中间边距*/
margin-left:10px;
margin-right:10px;
float:left;
}
/*设置右中div*/
.right{
width:200px;
height:400px;
background-color:skyblue;
float:left;
}
/*设置footer div*/
.footer{
width:1000px;
height:100px;
background-color:black;
margin:0 auto;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div calss="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
