css定位属性的运用

网页中的定位

css有三种基本的定位机制：普通流、浮动流、定位流。

网页中的大部分对象是普通流，默认占用文档流，也有一些对象是不占用文档流的，例如表单中的隐藏域（type：hidden；），既然有区别，那肯定也有转化的方式，将占用文档流的元素转换成不占用文档流；这就要用到css中的属性：float，posstion，display。

文档流：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流：元素脱离文档流后自身不占据空间。浮动float，绝对定位a+bsolute 固定定位fixed，元素不显示display：none；

1.float
float是css中的定位属性；用于设置同级元素的横向排列，属性值有left、right、none。设置浮动的元素不占据空间，脱离html文档流（需要回归文档流需要清除浮动clear）

1.1添加浮动
通过float属性可以实现元素向左向右移动，它的边缘会贴在其父元素的边缘上或者另一个元素的边缘上。（添加浮动的元素最好有一个盒子包裹）
1.2清除浮动
浮动的目的是使同级元素在同一行显示，并且可以设置宽高，类似inline-block，只不过float脱离文档流。

clear：left；clear：right；clear：both；clear：none；

2.position
默认值是static静态定位： position的默认值，默认文本流的状态 不会识别left right top bottom 指定的坐标。绝对定位（absolute）、相对定位（relative）、固定定位（fixed）、黏性定位（sticky）。

2.1relative
相对定位：不脱离文档流，参照物是以自身默认的位置，始终占据空间。

2.2absolute
绝对定位：脱离文档流，不占据空间、按照已经有定位的父元素进行位置的变化（加入当前没有父元素或者父元素没有定位的情况下，以整个文档为参照物！）

2.3fixed
固定定位：脱离问档流，不占据空间，是以整个浏览器窗口为参照物。

2.4黏性定位
position：relative 和position：fixed的结合。 如果页面没超出窗口范围，按照relative执行，如果内容超出窗口位置，按照fixed执行。