利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题

在进行页面布局的时候经常会用到float属性对元素进行浮动处理，但是有时候你会发现当子元素进行了浮动之后，其所在的父元素的高度无法做到自适应了，从而导致浮动元素的内容溢出了其所在的父级元素。例如执行如下html代码，效果如图所示：

html代码：

<div class="container ">               
   <div class="city">         
      <div>苹果</div>
      <div>橘子</div>
      <div>栗子</div>
      <div>香蕉</div>
      <div>葡萄</div>
      <div>橙子</div>
      <div>南瓜</div>
      <div>番茄</div>
      <div>柿子</div>
      <div>茄子</div>
      <div>青椒</div>
      <div>桃子</div>
      <div>石榴</div>
      <div>红枣</div>
      <div>西瓜</div>
      <div>甜瓜</div>
      <div>苦瓜</div>
      <div>冬瓜</div>
   </div>    
</div>
           

css代码：

.container {width:200px;line-height:150%;border:1px solid #CC6600; margin-bottom:8px;}
.fruit { padding:6px 0px; }
.fruit div { float:left; width:35px; text-align:center;}
           

效果图：

经实验发现可以利用overflow属性来解决这个问题，CSS代码如下：

.container {width:200px;line-height:150%;border:1px solid #CC6600; margin-bottom:8px;}
.fruit { padding:6px 0px;<span style="color:#FF6666;">overflow:auto;zoom:1;</span> }
.fruit div { float:left; width:35px; text-align:center;}
           

说明：overflow:auto;可以让高度自适应，而 zoom:1;可以兼容IE6。

效果图：