在用div+css做网页的时候float是最常用的,相对于position比较好控制一点。
float分为:float:left;float:right;float:none;一般情况下只用前两个。
浮动从字面意思就知道他是把该层浮起来,在浏览器默认的情况下这个位置上是空的,所以在使用float布局的时候初学者要记得当这一块做完时清除浮动,不然会影响到下面的布局,等到用的相当熟练的时候,就不用每个都清除,只清除会影响下面布局的浮动就行了....
清除浮动,clear:both;一般使用的时候我们是在需要清除浮动的层下面加上一个空层,如下:
<div>
<img class="left" src="images/levis_1.jpg" alt="baidu"/>
<img class="right" src="images/levis_2jpg" alt="baidu"/>
<div class="clear"> </div>
</div>
css .left{float:left;}
.right{float:right;}
.clear{clear:both;height:0px;overflow:hidden;}
再者就是浮动后标签的一些默认属性变化,浮动后的层的大小是有内容来定的,也就是说浮动后内容有多大他就默认为多大,我们可以设置他的宽高来控制,行属性 的标签在默认属性下是不能设置宽高的,我们可以用浮动让他改变他的默认属性,这样更有利于我们控制标签...
在经过反复的练习我们会发现,有很多浏览器在层与层之间有默认的间距,看似很小的间距大却会影响整体的布局,让人很反感,这时候我们可以选择让这些有默认间距的层浮动来消除间距,因为浮动后的层都是紧挨这的没有间隙..
position定位布局,该属性常用的值有relative(相对),absolute(绝对);z-index;
1:设置了position:relative而不设置left,top等属性的时候,层显示的位置和不设置position属性或者position值取static时一样。
2:当一个层设置了position:relative,而且使得层位置产生相对偏移时,并不影响文本流中接下来的其他层的位置。
当我们设置position的值为relative时,层依然存在于文本流中,也就是不管位置是否偏移,文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移(设置了top,left等值)时,该层将完全从文本流中脱离,进而以该层所在的父容器的坐标原点为参考点进行偏移,可以这理解,该层已经和同级容器中的其它元素脱离了关系,也不会对其它元素产生人和影响。
一般我们在使用定位布局的时候,通常情况下是在父级标签上设position:relative,在需要定位的层上设position:absolute;top:20px;left:10px;,这样控制起来相对比较好控制...
我个人认为还是用float布局比较好, position在JavaScript上用得比较多,当然了只要用的多了,达到了一定的熟练程度用什么来布局都不成问题的,关键是要多做多练,多总结..