本人比较喜欢用overflow:hidden来消除常见的浮动，如果遇到“又要清除浮动又要保留绝对定位到元素外部区域显示的内容的可见性”的情况就使用方法1中介绍到的清除浮动的万能方法！！
css清除浮动常用的几种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动的几种方法</title>
<style type="text/css">
.test{border:2px #00FF00 solid;margin-bottom:10px;}
.fl{float:left;width:100px; height:100px; background:#00F;}.fr{float:right;width:100px;height:100px; background:#f00;}
/* 方法1：传说中清除浮动的万能方法 */
.clearfix{display:block;*zoom:1;}/*zoom:1 作用：触发IE6,7模式下的hashlayout,以达到清除浮动的效果，换成其它能触发hashlayout的属性如：_heigth:1%;*/
.clearfix:after{content:'.';display:block;width:0; height:0; overflow:hidden;clear:both;}
/* 注意：CSS选择器.clearfix必须在浮动元素的父级元素中调用!
原理：在父元素最后面生成一块元素用于清除浮动(ie7及以下版本的浏览器不支持伪元素:after,结合上面的height:1%从而做到万能清除浮动)*/
/* 方法2：最简洁的方法：在浮动元素的父级元素中加入有定义overflow:hidden的css属性.fix2，各浏览器通用。
.fix2{overflow:hidden;_zoom:1;}
此方法会导致超过父元素区域的子元素内容隐藏无法显示出来，若是这种情况可用方法一代替。
*/
/*方法3：最不爽的方法：在最后一个浮动元素后面加一额外的标签元素用来清除浮动(此方法还能解决ie7 margin-bottom失效问题)。示例如下：
.fix3{display:block;clear:both;height:0;overflow:hidden;}
对应加入的标签：<span class="fix3"></span>
*/
</style>
</head>
<body>
<div class="test clearfix">
<div class="fl"></div>
<div class="fr"></div>
</div>
<div style="width:200px;">浮动元素下面的内容，浮动元素下面的内容</div>
</body>
</html>
--www.phpvar.com
快速留言：
5条评论( 网友:4 条,站长:1 条 ) 网友评论{有您的评论更精彩....}