CSS中清除浮动最优方法

也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。

一、清除浮动 还是 闭合浮动 ？

很多人都已经习惯称之为清除浮动，以前我也一直这么叫着，但是确切地来说是不准确的。我们应该用严谨的态度来对待代码，也能更好地帮助我们理解开头的三个问题。

1. 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none；
2. 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。

我们来看看下面例子，清除浮动和闭合浮动：

CSS代码如下：

#main {width:300px;height:auto;padding:10px;background:#ccc;}
#main .left {width:100px;height:50px;background:red;float:left;}
#main .right {width:100px;height:50px;background:blue;float:left;}                 
#footer {width:300px;height:20px;background:green;}

HMTL代码如下：

<div id="main">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>                              
<div id="footer"></div>

结果如图所示：

二、解决这种问题有几种方法：

1. 在父级添加 overflow：hidden
   优点：不存在结构和语义化问题，代码量极少
   缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

2. 父元素也设置浮动（加个float：left/right）
   优点：不存在结构和语义化问题，代码量极少
   缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

3. 父元素设置 display:table
   优点：结构语义化完全正确，代码量极少
   缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

4. 使用 :after 伪元素
   优点：需要注意的是 :after 是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。
   由于IE6-7不支持:after，使用 zoom:1 触发 hasLayout。
   缺点：兼容性不是很好。

5. 在浮动的元素后面添加空标签 <div class="clear"></div> 清除浮动
   优点：简单明了
   缺点：无意义的空标签，不利于语义化

小结

通过对比，我们不难发现，其实以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动。

相关连接：http://hi.baidu.com/dusongdeng/item/a2792bb7ed7241b2eaba9395
相关连接：http://www.qianduan.net/new-clearfix.html