▲浅谈清除浮动
浮动具有包裹和破坏两个特性,正因为这样，它才可以用来布局，实现丰富多彩的网页。但也因为这样，使得页面经常出现错乱，于是有了清除浮动。
那么，清除浮动都有哪些方式呢？它们各自都有什么优缺点？我们该怎么选择以得到最适合我们的清除浮动样式呢？接下来我将谈谈自己在开发中总结的一点点经验。先写下一段代码，我将用他进行说明。
<style type="text/css">
.fl{float:left;} .fr{float:right;}
.clear{clear:both;}
.dib{display:inline-block;} .dt{display:table;} .dtc{display:table-cell;}
.ovh{overflow:hidden;} .zoom{zoom:1;} .clear-float{overflow:hidden;zoom:1;}
.clearfix:after{clear:both;display:block;visibility:visible;height:0;line-height:0;content:"";} .clearfix{zoom:1;s}
</style>
/*html代码*/
<div class="box">
<div class="fl"></div>
<div class="fr"></div>
</div>
以上就是本篇文字将要用到的例子。
============================================================================================
清除浮动的方式及各自的优缺点
1、<br />标签的clear属性;(参考自：林小志《css那些事儿：掌握网页样式与css布局核心技术》)
2、css样式的clear属性;
3、display相关属性值;
4、overflow的非visible属性值;
5、zoom:1清除浮动;
6、:after伪类
7、表格嵌套浮动内容(没有试过这种用法，但为了解决浮动而增加一层表格结构标签，先入为主地就把它给pass了。在此只是想说明有这么一种用法。)
用法说明：（以代码演示）
1、
<div class="fl"></div>
<div class="fr"></div>
<br class="all" />
</div>
缺点：(1)多了一层结构化标签；(2)标签必须进行合理地(即：br标签须放在浮动层之后立即清除)嵌套，否则无法实现清除效果;
2、
<div class="fl"></div>
<div class="fr"></div>
<div class="clear"></div>
</div>
或：
<div class="fl"></div>
<div class="fr"></div>
</div>
缺点：(1)多了一层结构化标签；(2)有可能出现清除效果不佳的情况，如在ie6下有出现过高度变高的情况，或许还有其他的问题。不解释...
3、
<div class="fl"></div>
<div class="fr"></div>
</div>
或
<div class="box dt">
<div class="fl"></div>
<div class="fr"></div>
<div class="clear"></div>
</div>
或
<div class="box dtc">
<div class="fl"></div>
<div class="fr"></div>
<div class="clear"></div>
</div>
简：这三个样式的用法可以归结为一类，首先它们都能用来清除浮动，其次它们都有共同的缺点，如下：
缺点：右浮动层失效，变为左浮动层(这个有待进一步确认：1、成左浮动层，那么它就具有包裹性；2、不是浮动层，随左浮动层自适应浮动。检测方法可用firebug调试)，内容往左浮动层靠。要用它们的唯一出路就是设定宽度。
4、
<div class="fl"></div>
<div class="fr"></div>
</div>
缺点:1、只能清除标准浏览器的浮动，对于ie6这类老古董无效；2、浮动层里有层级定位块的时候，层级块会被隐藏 ，解决的办法就是把overlow的属性值改为auto；但是auto貌似也有局限性,没用过也没碰过，所以无权发言，掠过...
5、
<div class="fl"></div>
<div class="fr"></div>
</div>
缺点：ie浏览器的私有属性，无法通过css的验证;
补充：结合4、5两点存在的问题，我们可以把两者结合起来用，代码如下：
<div class="fl"></div>
<div class="fr"></div>
</div>
6、
<div class="fl"></div>
<div class="fr"></div>
</div>
缺点:after伪类的属性不被ie6支持，所以需要添加zoom:1来针对ie6进行清除浮动。有一点，content后面最好是为空。
=============================================================================
写在后面的话：
只要用到了浮动，就为页面买下来布局的隐患，正确的语义、合理的结构、简洁的代码，将是你避免浮动造成布局问题的一个关键所在；在清除浮动的问题上，我们可以选择适合自己的方式，这往往可以根据自己开发项目的大小来决定。一个小项目，也许只需要clear就能够解决了；而对于大的项目，即使碰到clear-float说不定也要出现诸多问题，但是当我们了解了它们之间的优缺点，扬长避短，还是可以解决问题的。
