CSS float时，子元素与父元素大小问题

举个例子：

<style>

#parent{

 width:900px;

backgound:gray;

}

#children_left{

 width:450px;

 height:300px;

 float:left;

 background:pink;

}

#children_right{

 width:450px;

 height:300px;

float:right;

background:green;

}

</style>

<div id=parent>

<div id=children_left>

</div>

<div id=children_right>

</div>

</div>

很奇怪的现像出现了，在IE6下，父元素也会跟着自动变大，而在火狐下，父元素竟然为0px，这让我郁闷了好久，最后在网上看到说：要在父元素里加上这句话，

    zoom: 1;
    overflow:hidden;
果然，加上这句话就OK了，不论在IE下，还是火狐下，父元素也会跟着变大，但我始终不知道为什么？