CSS浮動問題：如何將盒子放置在另一個之下？

我想在這裏漂浮在一個容器中的框。我遇到的問題是，如果內容在其中一個容器中變得太大，則它下面的子容器不會將其自身置於其下方，而是從頂部容器的邊緣向左浮動。希望我有些道理。我在下面發佈代碼，這可能會給你一個更好的主意。而且我還附上了我想要實現的圖像。如果問題不明確，請告訴我。CSS浮動問題：如何將盒子放置在另一個之下？

謝謝

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>containers</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style> 
#container{width:700px;margin-left:auto;margin-right:auto;overflow:hidden;background:red;} 
.subContainer{width:340px;background:blue;float:left;} 
.subContainer:nth-child(even){background:green;float:right;} 
</style> 
</head> 

<body> 

    <div id="container"> 
     <div class="subContainer"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
       Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus 
       et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla. 
       Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc 
       quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat 
       sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus 
       urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique 
       tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo. 
       Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper 
       sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien 
       in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia 
       at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in 
       ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at 
       tortor vel metus elementum euismod. 
      </p> 
     </div> 
     <div class="subContainer"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
       Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus 
       et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum 
       fringilla. Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet 
       ante felis. Nunc quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu 
       placerat vitae, placerat sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam 
       erat volutpat. Vestibulum rhoncus urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. 
       Nullam ac scelerisque neque. Donec tristique tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, 
       blandit non hendrerit eu, vestibulum vel justo. Curabitur et massa sapien. 
      </p> 
     </div> 
     <div class="subContainer"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non lorem sem, et scelerisque augue. 
       Integer ut tortor libero, vel aliquam sapien. Pellentesque habitant morbi tristique senectus et netus 
       et malesuada fames ac turpis egestas. Phasellus id aliquet sapien. Cras sit amet diam sed massa bibendum fringilla. 
       Donec aliquet posuere urna. Vestibulum condimentum velit orci, ut iaculis tellus. Fusce sit amet ante felis. Nunc 
       quam felis, venenatis sed tincidunt quis, auctor a orci. Aliquam mauris leo, lacinia eu placerat vitae, placerat 
       sit amet sapien. Etiam eget dolor at neque dapibus pretium auctor non dui. Aliquam erat volutpat. Vestibulum rhoncus 
       urna id enim volutpat vehicula. Proin ut massa diam, quis condimentum sem. Nullam ac scelerisque neque. Donec tristique 
       tristique elit, nec vulputate turpis suscipit quis. Nam nisl purus, blandit non hendrerit eu, vestibulum vel justo. 
       Curabitur et massa sapien.Praesent laoreet, risus eu facilisis sodales, urna lectus condimentum felis, laoreet ullamcorper 
       sapien urna in lorem. Nulla ut sem sapien, ut aliquet augue. Curabitur nec lorem risus, in interdum augue. Sed aliquam sapien 
       in sapien viverra iaculis mattis eros pulvinar. In hac habitasse platea dictumst. Suspendisse viverra purus vitae nibh lacinia 
       at blandit arcu auctor. Mauris sapien lacus, euismod eget malesuada condimentum, bibendum a quam. Phasellus faucibus, orci in 
       ultricies mollis, orci tortor sagittis eros, non iaculis lorem orci nec quam. Donec luctus bibendum risus et gravida. Sed at 
       tortor vel metus elementum euismod. 
      </p> 
     </div> 
    </div> 

</body> 
</html>

Now