浮来浮去的元素

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

在写页面的时候，经常性用浮动来写页面，因为用浮动可以脱离正常的文档流，但是常常会因为父级高度塌陷而触发更多问题，这篇文章记录一下几种常见清除浮动的方法。

一、添加空标签

这种方法算是一种常见的清除浮动方式。创建一个div标签在浮动元素的底部达到清除浮动效果。但是这种方法会打乱正常网页布局，产生很多DIV。

html
<div class="box">
    <div class="main"></div>
    <div class="clear"></div>
</div>
css
.box{width: 500px;background-color: #000;}
.main{width: 100px;height: 100px;background-color: red;float: left;}
.clear{clear: both;}

---

二、给父元素设置超出隐藏

给父元素设置超出隐藏也可以达到清除浮动效果，因为这样可以触发一个叫BFC的东西，后续文章我会谈谈对BFC的理解。overflow: hidden 这个方法可以清除但是会造成不必要的损失。当然 overflow: auto 也是可以清除浮动让父元素有高度，但是不推荐用这类。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{width: 500px;background-color: #000;overflow: hidden;}
.main{width: 100px;height: 100px;background-color: red;float: left;}

---

三、父元素设置display:table

让父元素变成表格也可以清除浮动，但是不推荐这个方法，只做了解就行。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{width: 500px;background-color: #000;display:table;}
.main{width: 100px;height: 100px;background-color: red;float: left;}

---

四、用伪类清除浮动

给父元素增加个类名，并加上这段CSS代码即可清除浮动，这种方法是目前来说清除浮动最佳方法。zoom : 1; 这个主要是兼容 IE6 来使用，推荐用这个方法来清除浮动，好处大家应该都懂。

html
<div class="box   clearfix">
    <div class="main"></div>
</div>
css
.box{width: 500px;background-color: #000;display:table;}
.main{width: 100px;height: 100px;background-color: red;float: left;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{zoom:1;}

---

最后总结一下：写网页多多少少用到浮动，合理的清除浮动会对网页布局和优化有更大的好处。

---