先来看一个示例效果的对比：
这是清除浮动之前的效果。可以明显看到column1,column2,column3这三个浮动元素的父级元素的高度并没有被撑开。
这就是我们所要达到的效果，可通过下面的三种方法来实现。
方法一：
在浮动层最后一个浮动元素的后面多加一个元素来清除浮动即可，这是最简单也是最直接的方法。唯一的缺点就是在一定程度上改变了文档流结构。
html代码：
| 代码如下 | 复制代码 |
| <div id="demo"> <div id="c1" class="column">column1</div> <div id="c2" class="column">column2</div> <div id="c3" class="column">column3</div> <div class="clear"> </div> | |
css代码：
| 代码如下 | 复制代码 |
|
#demo {border: 1px black dashed;} .column { float: left; padding: 10px 0; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} .clear { clear:both;} |
|
方法二：
此方法需要依赖于下面两行文档类型的声明:
| 代码如下 | 复制代码 |
| <!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"> |
|
css代码:
| 代码如下 | 复制代码 |
|
#demo {border: 1px black dashed;} .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} [xmlns] #demo {overflow:auto;} /* For IE7+ and non-IE */* html #demo {height:1%; } /* IE only */ |
|
方法三：
非IE浏览器利用伪类 :after，IE浏览器利用其特有属性zoom。
css代码：
| 代码如下 | 复制代码 |
|
#demo {border: 1px black dashed; zoom: 1; /* IE only */} #demo:after { content: "."; display: block; clear: both; height: 0; font-size: 0; line-height: 0;} /*IE8 and non-IE*/ .column { float: left; padding: 10px; margin: 10px; width: 200px;} #c1 {border: 1px red dashed;} #c2 {border: 1px green dashed;} #c3 {border: 1px blue dashed;} |
|
overflow解决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> <title>float浮动之后的问题</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{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> |
|
实例参考 http://www.111cn.net/js_a/87/43100.htm
要注意以下几点：
1、 浮动元素会被自动设置成块级元素，相当于给元素设置了display:block（块级元素能设置宽和高，而行内元素则不可以）。
2、 浮动元素后边的非浮动元素显示问题。
3、 多个浮动方向一致的元素使用流式排列，此时要注意浮动元素的高度。
4、子元素全为浮动元素的元素高度自适应问题。
时间： 2024-09-04 11:12:58