html - 为什么浮动 div 服从 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;}

为什么文章 1 和文章 2 这两个 div 不向上浮动到父容器（#content）？为什么遵守 iframe 的边界，因此两个 div 漂浮在其下方？

Answer 1

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

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