一、CSS基本定位机制

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

二、CSS文档流

文档流：所谓文档流，可以理解为元素的一种状态，处于这种状态下的元素会具有一定的特性。例如：标准文档流就是一个默认的状态，在标准文档流中，元素会按照从左到右，从上到下的流式排列，并最终最终在窗口中自上而下分为一行行，每行从左到右的依次排放。

1.块元素

块元素特性（例如：div）：①多个块元素（兄弟关系），处于文档流时，从上到下各占一行排列；②文档流中的块元素的width的默认值与父元素的width相同；③文档流中的块元素的height的默认由子元素的高度决定（子元素撑起父元素）

2.内联元素

内联元素特性（例如：span）：①多个内联元素在处于文档流时，从左到右一次排开，一行不足时会换行排序；②处于文档流中的内联元素不能设置width和height，大小由内容区的大小决定；

三、元素脱离文档流

脱离文档流的属性：给元素添加定位、浮动等，需要注意的是，①当元素脱离文档流后，其他的元素在定位的时候会当做没看见他，会被重叠覆盖；②脱离文档流并不等于脱离DOM树，依旧包含在DOM中。

元素脱离文档流后的变化：

1.块元素

①若一个块元素脱离文档流，它下面的处于文档流中的兄弟元素会上移；②多个元素可以在同一行展示；③块元素被内容撑开，也就是说，width不是父元素的width

2.内联元素

①可以设置width和height

三、总结

总结：脱离文档流，也就是将元素在普通布局排班中拿走，不占据位置（悬空了），其他的盒子在定位的时候，会当做脱离文档流的元素不存在二进行定位，需要注意的是，使用float脱离文档流时，其他的元素盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于实验position脱离文档流的元素，其他盒子与其他的盒子内的文本都会无视他。