网站地图    收藏   

主页 > 前端 > css教程 >

CSS float - html/css语言栏目:html.css - 自学php

来源:自学PHP网    时间:2015-04-14 14:51 作者: 阅读:

[导读] 今天用了两三个小时终于彻底弄明白了CSS中float的内涵和用法,是这篇文章《CSS Float Theory: Things You Should Know》让我茅塞顿开。虽然网上有成千上万篇文章讲float,讲clear both的用法,但是...

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


float可应用的领域:

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

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

3. 多栏布局


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


---

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




自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论