float属性在ECSHOP模板中的作用
今天为大家介绍一下float属性在ecshop模板制作中起到的作用.
float的意思是 悬浮,用的最多的是 float:left 和 float:right,float:left的意思是左悬浮,那么right就是右悬浮。在ecshop模板制作中float属性起到了举足轻重的作 用,接下来大家看看ecshop默认模板中float属性的典型用法.
打开themes/default/style.css 有这样的内容
- .AreaL{width:200px; float:left; margin-right:10px;}
- .AreaR{width:750px; float:left;}
AreaL是左侧区域,而AreaR是右侧区域,一个网页分左右两栏,在div css中的布局就称为左右结构,那么要实现左右两栏是布局同一水平面的,只能用到float属性,如果没有加float属性,这两个模块将会产生错行也就是不在同一屏幕,产生错行的还有一个原因是width属性的宽度太大,比如两个模块的width宽度之和大于最外层div宽度的时候,也会产生错行.
那么这里AreaR为什么也是float:left 而不是float:right呢,其实无论怎么写都是可以的,这里已经定义了width宽度,而且是正好和左侧的模块宽度加起来为最外层宽度之和,那么无 论是left还是right都会显示一样的效果,很多ecshop模板,基本都是用到左右双栏布局,很少有三栏(左中右),因为三栏的话每个栏目的width数值只能保持很小,这样就不能展示很多内容,而京东商城模板因为是自适应宽度的关系,所以可以在宽屏状态下显示三栏也很大气.
下面引用一下css手册中float属性的说明:
语法:float：none | left | right
默认值:none
取值:
none:设置对象不浮动
left:设置对象浮在左边
right:设置对象浮在右边
