关于子元素应用float后父元素没有高度的解决方案

今天遇到一个小问题:子div应用了float后父div没有高度了。一般首先想到的解决方案是给父元素设置一个固定高度,但是如果高度是变化的就不可行了。于是赶紧Google了一番,找到以下解决方案:

<div id="big">
<div id="small" style="float:left;"></div>
</div>

如果这样排列,id为big的div将失去高度,解决方案如下:

<div id="big">
<div id="small" style="float:left;"></div>
<div style="clear:both;"></div>
</div>

在id为small的悬浮子div后面增加一个div,并设置css属性clear为both即可解决问题。