CSS float

今天用了两三个小时终于彻底弄明白了CSS中float的内涵和用法，是这篇文章《CSS Float Theory: Things You Should Know》让我茅塞顿开。

虽然网上有成千上万篇文章讲float，讲clear both的用法，但是都是得其形，不得其意。这篇文章从历史讲起，能让你一下子就明白为什么要引入float属性。了解了过去就能更加深入的理解现在。

1. float是为了解决文字环绕图片问题而诞生。图片可以引申为一切block、inline element。

2. 图片可以在页面最左边，可以在最右边，但不能在中间。

3. 环绕的内容结束后，可能后面的段落不想环绕了，就引入了clear属性。一个元素加上了clear:both之后就会不再环绕图片，而是另取一行。

4. 只要不clear，后继float对象会接着前一个float对象往后排。

5. clearfix: 高度为0，可见度为hidden，显示为block的样式，专门用于在不影响排版的情况下结束float，它的代价是要加上一个额外的空div：<div class="clearfix"></div>

float可应用的领域：

1. ul/li菜单，全部元素都float起来，就可以变成横排/竖排

2. thumbnail展示，所有块都float起来，自动排列

3. 多栏布局

这里有一个特别好的教程，step by step的跟一遍，一定能牢牢掌握这些技巧。

---

最后还是强调一遍：如果一个概念很多次你都不明白，没懂透，那就去看看它的历史，看看它为什么被发明出来，它是为了解决什么问题而诞生的？