第5讲 实例分析讲解CSS中的float及其相关属性
Float这个属性在网页设计制作中起很关键的作用.
举个例子:
我们写一段menu的代码
CSS如下:
#menu{width:100%; line-height:20px; height:20px; padding-left:5%;}
#menu li{float:left; padding-right:5px; list-style:none;}
.clear{clear:both;}
相关的HTML代码如下:
<div id="menu">
<div>
<li>菜单1</li><li>菜单2</li><li>菜单3</li>
<div class="clear"></div>
</div></div>
示范效果页面参见附录里的1.htm
下面来解释一下这段代码
先是menu这个ID,我们定义了它的总宽度width为100%宽,即宽度覆盖整个网页,设定了它的高度height为20px,它的书写高度为line-height为20px,整个内容向左浮动了5%
这里说明一下,记得上次某人问我h3标记中,用CSS让题目竖直居中就是靠line-height
Line-height定义了书写的高度,如果你没有定义的话,它就是默认的100%高度,当然它是默认居中的,但是你不可能看得出来的,如果定义了它的高度的话就能明显的了解到了.
在CSS中,我们定义了在#menu这个ID中的li标记向左浮动,为了美观,我用了两个修饰,一个是内容的右部分向左偏移了5px,另外一个是list-style,定义了li这个列表标记的样式为无样式,方便我们用背景图之类的东西来美化
然后在HTML中我们就会发现,以前默认的li标记是默认一个行的,现在变成了在一行,这个就是float的作用,浮动.
作为CSS中最为常用的属性,float主要用于双栏甚至3栏布局中,也常用于某些需要几个一行的地方.
需要注意的是,在HTML的第2行以及第4行,我们定义了一个限制层,层内用了一个新的层,class为clear,这个class的作用就是清除浮动.
因为float这个属性虽然非常的好用,但是容易引起错误,所以需要用清除浮动来消除这些错误.
很多时候网页写完后检查时的错位现象都是因为没有清除浮动而造成的.
这点希望大家要牢记.
下面我们来说明下float的一个特性,就是表现多样性
我们来看段例子,参看附录2中的2.htm
我们可以看到，float我们运用了不同的方法，实现了相同的部分，注意看源代码的话我们可以看出排布是不同的。
下面来说下原理，float:left是让层向左浮动，它的指挥顺序是从左到右。float:right正好相反，它的指挥顺序是从右到左，这个就可以解释1行和2行的排布区别为什么一个是div1,div2,div3而另外一个是div3,div2,div1。
