CSS float

当前位置 : 首页 > 网页制作 > CSS > CSS float

CSS float

来源: 作者: 时间:2016-01-25 10:02
今天用了两三个小时终于彻底弄明白了CSS中float的内涵和用法,是这篇文章《CSS Float Theory: Things You Should Know》让我茅塞顿开。虽然网上有成千上万篇文章讲float,讲clear both的用法,但是

今天用了两三个小时终于彻底弄明白了中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:


float可应用的领域:

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

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

3. 多栏布局


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


---

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




Tag:
网友评论

<