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；，这样控制起来相对比较好控制...，
但此时，需要定位的层就已经脱离了文档流而存在。