咱們知道，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）