浮动元素并列后，怎么不并列下去？
<!DOC TYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 浮动模型</title>
<style type="text/css">
div{
width:200px;
height:200px;
padding:30px;
border:1px red solid;
margin:30px;
float:left;
}
</style>
</head>
<body>
<h1>浮动元素并列一行</h1>
<div id="div1">元素1</div>
<div id="div2">元素2</div>
<div id="div3">元素3</div>
<h1>再另起一行</h1>
<p>三年级时，我还是一个胆小如鼠的小女孩</p>
<div>元素4</div>
<h1>能再跳一行吗？</h1>
</body>
</html>
上面是代码，下面是浏览器里的效果。为什么三个div并列以后，下面的内容还是继续并列呢？怎么改变，继续编辑下去？求大神详细解答原因~
