为什么我这样写但是右边的文字不跑到上面去？图片是250*187的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
.demo01 {
width: 700px;
}
.demo01.left{
width: 300px;
float: left;
}
.demo01.left img {
margin-left:20px;
}
.demo01.right{
width: 400px;
float: right;
}
</style>
</head>
<body>
<div>
<div>
<img src="01.jpg" alt="">
</div>
<div>
<h3>英国</h3>
<p>英国，全称大不列颠及北爱尔兰联合王国（The United Kingdom of Great Britain and 北爱尔兰以及一系列附属岛屿共同组成的一个西欧岛国。除本土之外，其还拥有十四个海外领地 ，总人口超过6400万，以英格兰人为主体民族。</p>
<span>10分钟之前</span>
</div>
</div>
</body>
</html>
