HTML中DIV自动高度识别不了内部左浮动标签的高度，代码如下

<div style="height:auto; background-color:#CCC;">
<div style="float:left; background-color:#0CF; width:100px; height:100px;"></div>
<div style="float:left; border:1px red double; width:98px; height:98px;"></div>
</div>

外层的DIV高度自动适应，理论上不是会被内部的DIV撑到100PX的吗？
为什么不行呢，外层DIV始终是0PX，如果里层的DIV不用左浮动的话倒是没什么问题。
请高人解答一下，谢谢！
要的是能自动适应高度，因为内部的div高度不是定的。
-------------------------------------------------------
<div style="height:auto; background-color:#CCC;">
<div style="float:left; background-color:#0CF; width:100px; height:100px;"></div>
<div style="margin-left:100px; border:1px red double; width:98px; height:150px;"></div>
</div>

这样的写法倒是能让外层适应里层第二个DIV的高度变化，但是第一个适应不了。