css的position,float属性的理解

我们知道，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）