浮动与定位

开发工具与关键技术：浮动与定位
作者：李波

在盒模型的时候，时常需要使用3大属性可以用来控制页面排版。
三大属性：position属性，display属性，float属性。
①position 属性控制页面上元素间的位置关系。
②display 属性控制页面元素是否显示或者是堆叠还是并排显示。
③float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等

position属性
position属性控制页面上元素间的位置关系，也就是排版。
怎么用？要知道怎么用，就要先了解position的属性值。
属性值：static（默认状态）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
1.static：页面元素默认的定位。
2.relative：relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top, 3.right, bottom, left.属性来改变它的位置。多数情况下用top和left就可以了。
absolute：absolute绝对定位。可以用top, right, bottom, left.属性来改变它的位置。多数情况下用top和left就可以了。
Display属性
none 此属性不会被。
block:此属性将显示为块级元素，且元素前后会带有换行符。
inline:默认属性，行内元素。
Float属性及用途
在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。
浮动(float)的三个属性值：left(左浮动), right(右浮动), none.
clear（清除浮动）的三个属性值：left（清除左侧浮动）,right, both。
通过学习我们知道通过float浮动这种控制方法，可以实现多栏布局，导航栏等功能。
！！！float属性很好用但也有不好的一面，例如 ：被设置了float的元素后面的元素，会在空间允许的情况下，向上提升到浮动元素平起平坐的位置。也就是说如果你设置了元素浮动的话，下面的元素也会被浮动所影响，如果我并不想紧跟在我后面的元素浮动，也就是让它自己停留在原来的位置上，不跟着浮动，那么我们就需要对该元素设置clear（清除浮动）属性。
下面是我的html部分，用float实现多栏布局。

在html中，如果我们直接设置div，默认下div是占一行的，在我们设置完成它的样式后，就会出现竖着排列成一竖。，如何解决这种情况呢，通过浮动属性：float，可以很好地调整html的布局。让其排成一横，从而实行多栏布局。

#效果如下图，为了凸显效果用的颜色。。。