普通文档流，定位（绝对，相对，固定），浮动

               

开篇介绍：在CSS中是有三种定位机制的：普通文档流、浮动和绝对定位。在未指定其它两种定位机制的情况下，所有框都是在普通文档流中定位的。

1、普通文档流

即就是根据块级元素的标签在HTML里的顺序，从上至下，依次排开。行内元素在一行中水平排列的。

行元素（行内元素）:在水平方向上修改水品尺寸(padding，margin，border)，能产生相应的效果，垂直方向上对行元素的高度是毫无影响的。

因此，行内元素直接定义width和height是没有意义的，行元素的宽高是靠内容撑起来的。

但是，可以通过设置line-height，来规定行元素的高度；

同样，可以通过对行元素设置display属性，转化为块元素，display：block

2、定位

static默认的：定位无特殊说明就是默认的，在普通流中显示，没有脱离普通流

absolute绝对定位

a、如果父级不是static，本级会跟着父级动，如果父级的父级不是static会按照离自己最近的父级来动，如向上的层次都是static，会直接定位到body的某一个位置

b、绝对定位当元素位置发生改变的时候，改变之前的位置已经不存在了，会被其他元素顶替掉该位置

注意：

      （1）、绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

     （2）、因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性为数值，不是px，来控制这些框的堆放次序。

relative相对定位

a、相对于自己原来的位置定位，更改方式有像素值和百分比，其中使用百分比来更改则需要理解百分位为父视图

b、在当元素位置发生改变的时候，改变之前的位置还存在，不会被其他元素定提到该位置

fixed固定定位

a、可以固定在屏幕的固定位置，元素定位是从元素的内容开始定位，eg：padding是输入div中的内容，定位内容包括padding，属于绝对定位，脱离文档流，会发生覆盖，只是他是基于视口的定位，随着滚动条滚动，不会发生改变
相对定位(relative): 是一种相对于元素初始位置的移动，在水平方向上使用left和right，垂直方向上使用top和left。但是无论是否移动，元素仍然占据原来的空间，所以移动的元素会导致覆盖的情况。它仍然是被看 作普通文档流的一部分，这和接下来的绝对定位有着本质区别。
绝对定位(absolute): 这是一种非常有用，也经常被人滥用的css技术。绝对定位会使元素脱离普通文档流，不占据文档流的空间。其它元素的布局会忽视绝对定位。它是相对于 基于它的上一个已经定位的祖先元素进行偏移。若没有已经定位的祖先元素，通常情况下就会根据HTML元素进行偏移。进行绝对定位后，会有显示的层级z- index，数值越高，层级越高。
固定定位(fixed): 它也属于绝对定位，脱离文档流，会发生覆盖。但是它是基于视口的定位而且随着滚动条滚动，位置不会发生改变。
常见用法：对于一个嵌套的元素，要让内层元素灵活定位在包含元素的附近。可以先让包含元素position:relative，再让内层元素position:absolute，这样内层元素就会相对于外层元素进行位移。
3、浮动
浮动的元素脱离文档流，失去文档流的元素空间。
若进行左浮动，脱离文档流的元素会向左移动，直到遇到包含元素的左边缘。
若多个元素一起浮动，则除第一个元素之外，其它元素都会定位在前一个浮动元素之后（即它的右边）。
若包含元素不够宽，则无法水平排列的元素会向下移动，直到有足够的空间。若浮动元素的高度不一致，还会发生元素卡在较高的元素的现象。
因为浮动元素脱离了文档流，所以浮动元素并不会占据包含元素的空间，包含元素高度不会自动撑开，造成塌陷。我们需要做点清除浮动的处理。