[转]overflow解决float浮动后高度自适应问题

http://www.syku.net/web/pagemake/css/200711/11414.shtml

也许你在做网页的时候发现，发一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。
如图中的城市导航内的城市列表中采用了float之后，那个外框的高度并不是内容元素的高度：

怎么解决这个问题呢？经发现可以采用overflow来解决！方法是在父元素加上

以下是代码片段：

overflow:auto; zoom:1;

即可
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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"> <div 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> </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日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> <li>本月20日起入境日本须留指纹</li> </ul> </div> </div> <div class="right">右侧内容</div> </div> <br class="clearfloat" /> <div class="footer">footer</div> </div> </body> </html>

[转]overflow解决float浮动后高度自适应问题相关推荐

css float 高度,CSS中浮动float 高度自适应
文章总结了浮动float 高度自适应及在这过程中碰到的一些问题方法总结. 先来看一个示例效果的对比: 这是清除浮动之前的效果.可以明显看到column1,column2,column3这三个浮动元素的 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
html字体变大自动换行,css 实现文字自动换行切同行元素高度自适应
1.实现div行内布局所有行跟随最大高度自适应 html代码样例: 所在部门 @ViewBag.decideDetail.departName 岗位 @ViewBag.decideDetail.pos ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
CSS设置div高度自适应
通过CSS实现Div高度自适应: 问: 在一个DIV中有多个未知高度的子元素DIV,怎样通过CSS实现子元素div同高或怎样实现同行div按照内容最多的那个设置高度. 如图: 实现1:添加表格特性 ...
解决子级用css float浮动而父级div没高度不能自适应高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 方法一:对父级设置固定高度此方法可用于能确定父级div内子级对象高度. 缺点: 父级是固定高度,而不随 ...
【Css】使用float:left浮动后，导致后面div高度“塌陷”的解决办法（示例和图示）
正确的样式:在父元素中增加一条:overflow:hidden; 错误的样式: 上图,当"精选推荐"的span使用float:left后,后面的div线顶上去了. 解决办法: 在父 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
html宽度自适应怎么调整li超出隐藏,HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法...
方法一: div 自适应宽度很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了方法二: div ul li 嵌套后解决高度自适应办法: html代码如下 ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...

[转]overflow解决float浮动后高度自适应问题

[转]overflow解决float浮动后高度自适应问题相关推荐

最新文章

热门文章