HTML浮动与定位方式详解

关于float与position的三种状态使用。
先简单介绍一下position的三种状态分别是fixed、absolute和relative

首先float用于修饰块级元素，这边用div来做例子。

当元素进行左浮动时，会变成排成一行显示，同时若使用右浮动也会使元素排成一行，同时顺序颠倒(原本绿色在左上，同时进行右浮动时绿色会在右上，红色在其左侧)
当使用fixed修饰时进行float不会有任何的效果，因为其本身以及脱离文档流，不能再进行浮动，而只能通过具体的数值或者百分比来绝对控制位置，同时也不会随着页面的变化而变化，因此不会对其他的元素产生任何的影响。一般用作与全局显示的元素。
absolute也会脱离的正常的文档流，但是他和fixed的区别在于他会受到父容器的一定影响，同时如果两个元素同时都是absolute也会相互有影响。同样，浮动也会失效，不在具有浮动特性，定位方式同上。如果其中一个元素是absolute定位而另外一个不是，则不会互相影响，会直接覆盖

relative即默认的排列方式，当前元素保持在正常的文档流中。
总结：
fixed：固定元素位置，脱离正常文档流，不论页面中元素如何变化，当前fixed元素始终固定位置，一般用于一些顶部菜单
absolute：让当前元素脱离正常的文档流，对当前元素的位置改变(left,top,right,bottom)不会影响邻近的元素，如果使用margin，padding属性也不会影响临近的元素（除非邻近的元素也是绝对定位）
relative:当前元素保持在正常的文档流中，对当前元素的位置改变(left,top,right,bottom)不会影响邻近元素，但是如果使margin,padding属性值进行留白，则附近元素会受到位置影响而产生变化