CSS之定位

        CSS的盒子模型有2种常见定位方式：float和position。在讲定位之前，有必要先了解下文档流。

文档流：将窗体（界面）自上而下分成一行一行，并在每行中从左到右排列元素。其中，块级元素（如div,h,hr,p,ul,table,form）独占一行。元素在各自的空间（行）上排列，互不干扰。显然，这样的布局方式不符合常理。现实开发中，需要将元素从文档流中跳脱出来，这就需要用到float和position的定位。

        一、float（浮动）定位

        对元素设置了float属性后，元素就跳出了文档流。需要有以下注意：

        （1）元素设置浮动定位后，不会影响该元素的前面的元素，只会对该元素后面的元素产生影响。

        （2）元素设置浮动定位后，该元素会向其父元素的边界（这里指左右边界）或同级浮动元素边界停靠。

        （3）元素设置浮动定位后，文档流会将该元素所占用的空间（块级元素是一行）清除掉，即当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。。

        可以用一句口诀概况：“影后不影前，浮动靠边停，勿忘清空间”。

        二、poistion定位

        position一般配合top(bottom),left(right)对进行元素定位，即一个元素可以通过在父元素中的水平和垂直方向上的位置来确定具体位置。position常见有2个属性：relative和absolute

        （1）relative定位方式仍在原来的文档流中，并未跳脱。元素采用该定位方法，是以元素自身在文档流中的位置为参考，通过设置left和top等进行元素的偏移。

        （2）abolute定位，使元素跳出了文档流。定位时，将以父级元素中第一个出现relative或absolute的元素作为参考，通过left和top进行元素的偏移。如果其父级元素中没有设置relative或absolute，则以body为参照物进行元素的偏移设置。