CSS中的Position与浮动float

标准文档流：在不使用定位或者特殊的CSS的时候，各个元素的排列规则。CSS规定网页元素的默认排列方式

设置负的margin可以破坏文档流，但元素还处于标准文档流中。

 

相对定位

Position : relative；  left : xx px ; top : xx px;  将当前这个元素设置为相对定位

1.      不影响元素本身的特性

2.      破坏当前的文档流，但是不会脱离文档流

3.      如果没有设置偏移量，元素是不会移动的

4.      Left、 top、right、 bottom

Position : 四个值，relative（相对定位），station（默认定位），fixed（固定定位），absolute（绝对定位）

 

固定定位

设置了偏移量过后，固定在屏幕上，并且已经脱离文档流，不会受文档流的控制

默认定位

遵循标准文档流

绝对定位

1.设置绝对定位要脱离文档流，默认漂浮在页面的左上角

2.文档>html>body

3.设置绝对定位后元素不会再占据原来的空间，也不会影响标准文档流的继续排序

4.默认给元素设置display : inline-block

5.如果设置父类或者父类的父类为相对定位，那要以定位父级作为父类

6.如果一个元素的父类比较多，找定位父级的时候，离他最近的是他的移动的标准

 

z-index：（数字） 设置定位层级

值越大，层级越大 （最大没有限制）

 

浮动float

1.      可以让块级元素在一行显示 (left /right)

2.      后面元素碰见前面元素的边界或父类元素的边界就停止下来

3.      行级元素默认加上display:inline-block

 

 

Clear 清除浮动 （left /right/both）

1． 加个空的div 并在style里写Clear :both

2． 清除浮动不是取消浮动，只是分割上面浮动对下面元素的影响