在设置浮动元素后的下一个元素如果内容多的时候会挤下来，这是为什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box1{
height:50px;
background: red;
float:left;
}
.box2{
height:50px;
background: blue;
float:left;
}
</style>
</head>
<body>
<div>fff</div>
<div>fff</div>
<p>nihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaonihaihaonihaonihaonihaonihaoni1111ddddddddddddddddddd11111haonihaonihaonihaonihaonihaonihao11111111111dddddddddddddddd1</p>
</body>
</html>
