我们知道，html是按照普通流来加载的，这个时候我们有些需求就不好实现。因此出现了非普通流：
1、普通流：按照顺序正常的排列，长度或不够就往下挤。position默认的static
2、非普通流：脱离了普通流（不按照普通流渲染），后面介绍的有position的relative, absolute, fixed以及float属性。尤其是float属性，滥用情况非常。
以下所说的“脱离普通流”是指不按照正常普通流的方式渲染，不要和单独一层混谈！
static: 处于普通流，也就是按照普通流的方式渲染
relative: 相对定位，脱离普通流，相对自己原来在普通流位置做出改变（right left top bottom）,但是原来的位置在普通流依旧占据。新的位置处于单独的一层。
absolute：绝对定位，脱离普通流，相对于父元素的位置进行定位，不会在普通流的占据位置，单独的一层。这个时候需要父元素也脱离普通流，否则不在同一层以浏览器的位置作为父元素进行定位。新的位置处于单独的一层。
fixed：固定定位，脱离普通流，相对于浏览器的位置定位，常用于广告和导航栏。新的位置处于单独的一层
relative absolute fixed不会影响接下来的元素按照普通流的方式布局，并且可以根据z-index属性改变层的前后位置。
float：浮动，脱离普通流，但不会单独的一层，以破坏自身的line-box来改变原本在普通流的位置，也就是‘’包裹与破坏‘’ 。同时影响之后的元素不按照普通流的方式布局。因此其他元素（不是浮动的元素）可以通过clear属性来清除左右的float，
使float之外元素拉回到正常，按照普通流的方式布局。float原本只是为了文字环绕图片，现在的float做了太多不是自身的事情。一个float影响整个布局，所以尽量采用其余的方式完成（例如:display:inline-block）
原文地址：https://www.cnblogs.com/huanqiuxuexiji/p/9063338.html