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