也许你在做网页的时候发现，会发现一个区块内的元素在被应用了float之后，整个box的高度就不以被浮动对象的高度为标准了。如下图，城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：
怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可：
| overflow:auto;zoom:1; |
“overflow:auto;”是让高度自适应，“zoom:1;”是为了兼容IE6，也可以用“height:1%;”来解决。
完整的代码如下：
|
*{padding:0;margin:0;} body{font-size:12px;line-height:150%;} ul{list-style:none;} .container{width:700px;margin:0 auto;} .header,.footer{height:60px;background:#99CC66;margin-bottom:6px;font-size:18px;font-weight:bold;} .main{} .left{float:left;width:200px;} .sidepanel{border:1px solid #CC6600;margin-bottom:8px;} .sidepanel h2{font-size:12px;background:#CC6600;height:24px;line-height:24px;text-indent:20px;color:#fff;} .city{padding:6px 0px;overflow:auto;zoom:1;} .city li{float:left;width:35px;text-align:center;} .right{margin-left:200px;background:#CCCC66;height:240px;} .hotinfo{padding:6px;} .clearfloat{clear:both;height:0;font-size:1px;line-height:0px;} </style> </head> <body> <p class="container"> <p class="header">header</p> <p class="main"> <p class="left"> <p class="sidepanel"> <h2>城市导航</h2> <ul class="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>南京</li> <li>广州</li> <li>重庆</li> <li>济南</li> <li>杭州</li> <li>郑州</li> <li>北京</li> <li>上海</li> <li>天津</li> <li>南京</li> <li>广州</li> <li>重庆</li> <li>济南</li> <li>杭州</li> <li>郑州</li> </ul> </p> <p class="sidepanel"> <h2>热门文章</h2> <ul class="hotinfo"> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留<font color="#43FF73">指纹</font></li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> </ul> </p> </p> <p class="right">右侧内容</p> </p> <br class="clearfloat"><!-- 用于清除浮动的元素 --> <p class="footer">footer</p> </p> </body> </html> |