css清除浮动的几种方法详解

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-07-02 16:24:53　-　阅:　-　评:0　-　积分:0

网页制作初学者在写代码时会遇到各种头痛的“bug”，现在再回首看曾经的那些伤脑筋的问题，已经都不是事了。记得当时班上遇到最多的就是关于浮动方面的问题：ie6下双倍边距；ie6下文字与日期成两行；ie6下父容器高1像素等。好了，还是先来举一例让问题重现吧。
实例一：效果图如下：

提示：一个大div内有2个小div，大div取名为“wrap”，属性：宽310px，水平方向居中，背景色为#ccc；左边div取名为“wrap_l”，属性为：左浮，宽高各100px，1像素边框；右边div取名为wrap_r，属性为：右浮，宽200px高100px;
好了，亲们可以动手练习下用代码实现上面这个实例。我相信部分亲在浏览器中会出现这种情况（注意：先不谈坑爹的ie6，为降低难度暂只在chrome下测试）：

源码如下：

<!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>wrap的背景不见了--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
.wrap{width:310px;margin:0 auto;background-color:#ccc;}
.wrap_l{width:100px;height:100px;float:left;border:1px solid #f00}
.wrap_r{width:200px;height:100px;float:right;border:1px solid #000}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_l">wrap_l</div>
<div class="wrap_r">wrap_r</div>
</div>
</body>
</html>

点击上面的运行代码即可看到“wrap”的背景色不见了，是不是很神奇！？

事实上，不光是初学者会遇到这种问题，就连很多大型网站都存在此类问题。只不过他们外面的容器没有必要设置背景而已。

再来看看这个问题，也许亲会疑惑：我明明给wrap写了背景的啊，难道单词拼写有误？？于是开始回头检查单词去了。事实上，我们遇到的很多问题都是因为属性少写的缘故。仔细检查“wrap”可以发现其并没有设置高度，当我们给其补上高度后即可解决问题。说到此，第一种解决浮动的方法就是：补全属性法（即给父容器设置合适的高度）。
优点：可以使我们养成规范属性的习惯！
缺点：父容器高度得到限制，不能自适应高度。

如果不设置高度，其实还可以通过给“wrap”设置浮动来解决（个人不推荐）或者是添加overflow:hidden;来解决此问题，最终的效果都是一样的。

下面来说第二种方法：额外标签法。即在个容器标签闭合前添加一个<div class="clear"></div>
缺点：页面会出现一些空标签。插入位置如下图：

至于这个clear:both洒家来说一点。一个简单的clear:both并不能解决所有问题。装修过淘宝店铺的亲都知道，插入空标签系统会默认插入“& nbsp;”这样一来，空的标签就占了一定的高度。这里浮动就需要解决这个高度的问题，完整写法如下：

.clear{clear:both;height:0;line-height:0;font-size:0;}

再来说第三种方法：利用伪对象:after。网上说这种方法是网上最流行的，我想其流行原因是这样的：首先，这类方法源于国外，因为他们不必要考虑天朝的破ie；其次，利用伪对象可以实现很多效果而不需要另写多个标签，页面代码更简洁且伪对象得到了更好的用武之地；最后，随着时代的发展，国内借签国外的优秀写法并将其发扬光大。在网上找了下代码，如下：

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{visibility:hidden;display:inline-table;}/* Hides from IE-mac \*/
* html .clearfix {height:1%;}/*用来触发 IE6 下的haslayout*/
.clearfix {display:block;}/* End hide from IE-mac */
/*国外文献：→→ http://www.positioniseverything.net/easyclearing.html */

经过测试发现，伪对象这种写法没有必要写这么多属性。下面附自己测试的写法源码如下：

.clearfix:after{content:"";display:block或table;clear:both;}/*仅适用于纯块对象*/
.clearfix{*zoom:1;}/*ie低版本需要设置此属性来触发haslayout使其恢复模块高度

再来附一张各浏览器下的效果图：

图中可以发现，ie8以下都能正常显示“wrap”背景，这样仅需要4个属性就可以解决掉浮动的问题。完整源码如下：

<!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>css清除浮动的几种方法详解--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="css清除浮动,清除浮动的几种方法,clear:both,clearfix:after,ie6 bug,ie6双边距,容器1px高度">
<style type="text/css">
*{margin:0;padding:0}
.wrap{width:310px;background:#999;}
span.wrap{display:inline-block}
.wrap_l{float:left;width:100px;height:100px;border:1px solid #f00;}
.wrap_r{float:right;width:200px;height:100px;border:1px solid #000;}
.clearfix:after{content:"";display:block;clear:both;0}/*仅适用于纯块对象*/
.clearfix{*zoom:1}/*ie7-*/
</style>
</head>
<body>
<!--纯块对象时-->
<div class="wrap clearfix">
<div class="wrap_l"></div>
<div class="wrap_r"></div>
</div>
<br />
<br />
<br />
<!--块对象与内联对象混合使用时-->
<span class="wrap clearfix">
<div class="wrap_l"></div>
<div class="wrap_r"></div>
</span>
<span style="width:100px;background:#CCC">块对象与内联对象混合使用时，添加此区块是为了检测上一元素的display属性</span>
</body>
</html>

注：以上测试环境均在xp下，观点仅代表个人，不代表大众。欢迎亲能提出自己的观点。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-07-02/170.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！