首页 > 代码库 > overflow解决float浮动后高度自适应问题
overflow解决float浮动后高度自适应问题
也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：
怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上如下代码即可
overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。
1 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 3 <head> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 5 <title>float浮动之后的问题</title> 6 6 <style> 7 7 * { padding:0; margin:0;} 8 8 body { font-size:12px; line-height:150%;} 9 9 ul { list-style:none;}10 10 .container { width:700px; margin:0 auto;}11 11 .header, .footer { height:60px; background:#99CC66; margin-bottom:6px; font-size:18px; font-weight:bold;}12 12 .main {}13 13 .left { float:left; width:200px;}14 14 .sidepanel { border:1px solid #CC6600; margin-bottom:8px;}15 15 .sidepanel h2 { font-size:12px; background:#CC6600; height:24px; line-height:24px; text-indent:20px; color:#fff;}16 16 .city { padding:6px 0px; overflow:auto; zoom:1;}17 17 .city li { float:left; width:35px; text-align:center;}18 18 .right { margin-left:200px; background:#CCCC66; height:240px;}19 19 .hotinfo {padding:6px;}20 20 .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}21 21 </style>22 22 </head>23 23 24 24 <body>25 25 <div class="container">26 26 <div class="header">header</div>27 27 <div class="main">28 28 <div class="left">29 29 <div class="sidepanel">30 30 <h2>城市导航</h2>31 31 <ul class="city">32 32 <li>北京</li>33 33 <li>上海</li>34 34 <li>天津</li>35 35 <li>南京</li>36 36 <li>广州</li>37 37 <li>重庆</li>38 38 <li>济南</li>39 39 <li>杭州</li>40 40 <li>郑州</li>41 41 <li>北京</li>42 42 <li>上海</li>43 43 <li>天津</li>44 44 <li>南京</li>45 45 <li>广州</li>46 46 <li>重庆</li>47 47 <li>济南</li>48 48 <li>杭州</li>49 49 <li>郑州</li>50 50 </ul>51 51 </div>52 52 <div class="sidepanel">53 53 <h2>热门文章</h2>54 54 <ul class="hotinfo">55 55 <li>本月20日起入境日本须留指纹</li>56 56 <li>本月20日起入境日本须留指纹</li>57 57 <li>本月20日起入境日本须留<font color="#43FF73">指纹</font></li>58 58 <li>本月20日起入境日本须留指纹</li>59 59 <li>本月20日起入境日本须留指纹</li>60 60 <li>本月20日起入境日本须留指纹</li>61 61 <li>本月20日起入境日本须留指纹</li>62 62 <li>本月20日起入境日本须留指纹</li>63 63 <li>本月20日起入境日本须留指纹</li>64 64 </ul>65 65 </div>66 66 </div>67 67 <div class="right">右侧内容</div>68 68 </div>69 69 <br class="clearfloat" /><!-- 用于清除浮动的元素 -->70 70 <div class="footer">footer</div>71 71 </div>72 72 </body>73 73 </html>
overflow在w3c的解释：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。