CSS定位机制

说道定位机制，大家是不是觉得只有float，absolute之类的才叫定位？

非也！

在CSS中，定位机制一共有四种：normal flow（普通流），float（浮动）， absolute positioning（绝对定位）和flex box。而普通流的定位又分为三种:block formatting（块级格式化）， inline formatting（行内格式化）及 relative positioning（相对定位）。

流

我们先来了解一下“流”的概念。说道流，你是不是想到了它

其实我们这个流和水流只是有一定的形似，都是一种流动。

通常，如果一个元素属于浮动元素（float属性值不为none）或是进行了绝对定位（position属性值为absolute或fixed）或是root元素，我们会称这个元素out-of-flow，即脱离了流；相反，称这个元素in-flow，即在流内。那么，流具体指代什么呢。CSS2.2 Specification给出的定义如下：

The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A

对此，我理解为：一个流就是一些元素的集合。只有out-of-flow元素（暂且称为A）才拥有自己的流，A元素的流包括它自己以及任何满足一定条件的in-flow元素，该条件要求这个in-flow元素最近的out-of-flow祖先为A。那么A元素内那些out-of-flow的子元素怎么办呢？它们会有自己的流，且在定位时A的流会当它们不存在，也就是说，这些out-of-flow元素的流之间是互不干扰的。

定位选择

在CSS中，display属性、position属性和float属性决定了某dom元素能否生成一个box以及box的位置，而这些也就决定了dom元素的定位方式。

那么这些属性值是如何决定box的命运的呢，请看下方等级列表。数字越小，优先级越高。

1. display:none

命运：dom元素不产生box, position 和 float 均无效，无生命，无定位

2. position: absolute / fixed

命运：dom元素产生box, float 的computed value为none， display的computed value请参照下方表格，属于绝对定位

3. float: right / left

命运： dom元素产生box, display的computed value请参照下方表格，属于浮动

4. 元素为 root 元素

命运：display的computed value请参照下方表格，属于普通流中的block formatting

5. 其他

命运：display的computed value即为specified value，依据display的值属于普通流中的block formatting 或 inline formatting

对照上面的等级列表，我们来分析以下dom元素属于哪种定位方式

• div元素，没有指定display,float,position

------------ 普通流的block formatting

• span元素，position指定为fixed, float: left, 没有指定display

------------ 绝对定位

• html元素，display指定为inline, position:absolute, 没有指定float

------------ 绝对定位，containing block为initial containing block(看第10条)

• span元素，float指定为left,没有指定position,display
  

------------ 浮动

• table元素，display指定为none，没有指定position,float
  

------------ 无生命，无定位

• div元素，float指定为right, position指定为relative,没有指定display

------------ 浮动，普通流的relative positioning

在具体调试CSS过程中，大家可以对照以上等级表来确定某个dom元素的box的定位方式，我就不再一一举例了，因为————太多了。。。

好了，今天就是介绍了下定位方式的种类以及它们之间的优先级。如果大家想要知道某种定位的具体流程，那就点击文章第三段中出现的链接进去看吧！周末愉快啦！