position与float属性的使用

 1、使用float时，可以说是用于布局，取值主要有left、right、none。就是将该块的元素浮动起来，在浏览器默认的情况下，该元素的位置是为空的，

       即脱离了文档流而存在，如果有其他元素，那么这些元素会将该元素在浏览器中本身的位置所占据，进而将该空白部分填充。

     如果元素浮动了，那么它会对其后面的元素的布局产生影响，所以在设置浮动后，需要对该块进行浮动的清除，一般采用的方法就是在该浮动元素

     后面添加一个空的div来清除浮动：如以下代码：

Html代码：

<div>

    <img src="../img/cbtn1.jpg" class="left">

    <img src="../img/cbtn2.jpg" class="right">

    <div class="clear"></div>

</div>

<div class="con">

    <img src="../img/cbtn3.jpg" class="bottom">

</div>

 

Css代码：

.left{

    float: left;

}

 .right{

        float:right;

    }

.clear{

    clear: both;

    height:0px;

    overflow: hidden;

}

此外,尽管元素或块进行浮动了，它的大小时根据内容的大小来决定的，如果需要重新定义区域的高度，那么可以在css里设置height属性来控制浮动层的高度。

 

使用position属性：

position定位布局，该属性常用的值有relative（相对），absolute（绝对）；z-index；

1：设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者position值取static时一样。

2：当一个层设置了position:relative，而且使得层位置产生相对偏移（即设置了top、left、bottom、right等属性的值）时，并不影响文本流中接下来的其他层的位置。在浏览器中的位置仍然是存占位的。

当我们设置position的值为relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移（设置了top,left等值）时，

该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生任何影响。

一般我们在使用定位布局的时候，通常情况下是在父级标签上设position:relative，在需要定位的层上设position:absolute；top：20px；left：10px；，这样控制起来相对比较好控制...，

但此时，需要定位的层就已经脱离了文档流而存在。