float与position的使用

源：http://blog.csdn.net/qq404766692/article/details/6521150

 

在用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">&nbsp;</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；，这样控制起来相对比较好控制...