CSS文档流

  文档流是指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自己的理解是从头到尾按照文档的顺序,该在什么位置就在什么位置,自上而下,自左到右的顺序),这是普通流的说法。

  而很多时候会出现影响普通流而存在,最典型的就是浮动、定位(相对定位和绝对定位)

  1.浮动

  浮动常用在块级元素上,普通流里的块级元素会独占一行,而应用了float的元素就脱离了文档流,可以多个一排,其作用与display:inline-block相似。由于脱离文档流的元素是不占据空间的,所以添加了CSS浮动的元素会对其周围的其他元素产生或多或少的影响。

  2.定位

  相对定位:相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。即相对元素在文档流中的位置进行偏移,保留占位。

  绝对定位,绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。而绝对定位完全脱离文档流,相对于position属性非static值的最近父元素进行偏移。

  固定定位,元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身,用fixed,他是完全脱离文档流,相对于视区进行偏移。

  文档流其实就是文档中可显示对象在排列时所占用的位置。

原文地址:https://www.cnblogs.com/Song-Timfa/p/10837628.html