哪里错了？为什么我的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>