《
overflow解决float浮动后高度自适应问题》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335942013.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>float浮动之后的问题</title> <style> * { 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> <div class="container"> <div class="header">header</div> <div class="main"> <div class="left">,net页面之间传递值的方法; <div class="sidepanel"> <h2>城市导航</h2>,MUX的设计师项目分享 百度搜索客户端; <ul class="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>南京</li> <li>广州</li> <li>重庆</li>,min-height和height; <li>济南</li> <li>杭州</li> <li>郑州<,Loading反馈在实际设计中不容忽视;/li> <li>北京</li>,lighttpd配置HTTPS(SSL); <,JS控制样式的代码;li>上海<,JS封装的CSS圆角框组件 V1.0;/li> <li>天津</li> <li>南京</li> <li>广州</li> <li>重庆</li> <li>济南</li> <li>杭州</li> <li>郑州<,Js和CSS实现脚注(Footnote)效果;/li> </ul> </div> <div 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日起入境日本须留指纹<,JS代码优化技巧之通俗版(减少js体积);/li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> </ul> </div> </div> <div class="right">右侧内容</div> </div>,JS+DIV表单实例――鼠标移上背景变色和文字提示; <br class="clearfloat" /><!-- 用于肃清浮动的元素 --> <div class="footer">footer</div> </div> </body> </html>
兴许你在做网页的时候发明，发一个区块内的元素被利用了float之后，那么全部box的高度对就不以被浮动对象的高度为尺度了。
如图中的城市导航内的城市列表中采取了float之后，那个外框的高度并不是内容元素的高度：
怎么解决这个问题呢？经发现可以采用overflow来解决！方式是在父元素加上如下代码即可
--> [
网站建设之]overflow解决float浮动后高度自适应问题
Tag： 解决 浮动 高度 问题 适应 解决 浮动 高度 问题 适应
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也能够用height:1%;的方法来解决。
[ 提醒：你可先修正局部代码，再按Ctrl+A 全体抉择 ]
overflow:auto; zoom:1;
(责任编辑：网站建设)
overflow解决float浮动后高度自适应问题相关文章