哪里错了？为什么我的img被挤到外面了
<template>
<div class="main">
<div class="right"></div>
<div class="left">
<div class="top">
<img src="../../public/img/首页2.png" />
</div>
<div class="buttom"></div>
</div>
</div>
</template>
<script>
</script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.left{
width: 100px;
margin-right: 10px;
float: left;
}
.right{
width: 1000px;
margin-left: 10px;
float: left;
}
.main{
width: 1200px;
margin: 20px auto;
}
.top img{
width: 1000px;
height: 200px;
}
.left,.right{
background-color: blue;
height: 500px;
}
</style>
