为什么浮动的divs服从iframe？

Question

例如：

http://jsfiddle.net/58AR7/

HTML

<div id="content">

<iframe class="frame" width="960" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?...</iframe>


<div id="article1">
</div>

<div id="article2">
</div>

</div>

CSS

#content {
width: 960px;
margin: 0 auto;
overflow: auto;
height: 100%;}

#article1 {
float: left;
width: 400px;
height: 400px;
background-color: black;}

#article2 {
float: right;
width: 400px;
height: 400px;
background-color: black;}

为什么这两个div，第1条和第2条，没有浮动到父容器（#content）？为什么iframe的边界服从，因此两个div在它下面浮动？

Answer 1

float表示“向左或向右移动并允许后续元素在我旁边冒泡”。

浮动元素不会使它向上移动。您必须浮动iframe才能使文章div移动到它旁边。