float浮动属性及position定位属性

float浮动属性

1. float浮动属性是Div布局中经常要设置的一个属性。<div>是一个块级元素，在水平方向上会自动伸展，直到包含它的元素的边界；而在垂直方向和其它元素依次排列且能并排。但当使用了float浮动属性后，块级元素的表现就会有所不同。
2. float浮动属性可以设置的值为left，right，inherit及默认值none。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时元素的宽度会根据其内容伸展或收缩。
3. 在CSS中可以通过设置块元素的clear属性，清除对float的影响，若clear属性设置为left，清除float对其左侧的影响；若clear属性设置为right，清除float对其右侧的影响；倘若左右都有浮动的块元素，而新的块两侧都不希望受到影响，则可以将clear参数设置为both。

position定位属性

Position属性一共有4个值，分别为static、absolute、relative和fixed。其中static为默认值，它表示块保持在原本应该在的位置上，即该值没有任何移动的效果。

                 

对页面上id为“block”的div块进行了绝对定位，如上图显示，可以看到块的位置发生了改变，不再与其父类有关。

设置了子块的position属性为relative，显示结果如上图所示，可以看到子块的左边框相对于其父块的左边框(它原来所在的位置)距离为15px，上边框也是一样的道理，为10%。