div中的iframe弄乱了父div中的其他div

Question

所以我有一个这样的布局：

<--------------------------------parent div------------------------------------->
<---div1---><---------------div2----------------><-------------div3------------->

当我向div3添加iframe时，它将div 2向下移动到iframe的高度以下，同时保持div1相同，因此

<--------------------------------parent div------------------------------------->
<---div1--->                                     <-------------div3------------->
                                                                 <-
                                                             iframe height
                                                                 ->
             <---------------div2---------------->

我该如何解决这个问题？这是我的div代码：

<style>
div {padding:5px;}
#frame {width: 400px;height:800px;border: none;-moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;-o-transform: scale(0.9);-o-transform-origin: 0 0;
    -webkit-transform: scale(0.9);-webkit-transform-origin: 0 0;
}
</style>
<div>
     <div style="float:left; width:16.5% ">.... </div>
     <div style="display:inline-block;width:30%; ">....</div>
     <div style="display:inline-block; width:28.5%; "> <iframe> </iframe></div>
</div>
<div style="clear:both "></div>

Answer 1

将margin: 0; padding: 0; float: left添加到div和#frame。