css样式中的定位和浮动

这两天学习了一下css的定位和浮动。

相对于定位我比较推荐用浮动达到改变页面布局的效果，除了默认定位 position:static; 其它3种定位往往会有重叠的问题出现，当不需要重叠时这会让你非常头疼，当然需要带重叠效果时使用定位并设置left,right,bottom,top这些偏移属性是很方便的。

定位 position有4种属性可以设置

static
默认设置，等于没用定位，也没什么好说的，当你不去设置position属性时默认值就是这个。

relative
看了下谷歌翻译，单词的意思是相对的，也就是说这个属性是相对定位，当你没有进行偏移的时候，这样设置和static区别不大（包含绝对定位的子元素时会有区别），设置偏移元素的时候会根据本元素最开始所在的位置进行偏移。会重叠，原本所在的位置会留下空白空间，感觉像是从投影仪中投出来的投影，虽然在幕布上观看，实际上图片是在一边的投影仪中。通过调整镜头方向改变投影在幕布上的位置。

absolute
谷歌翻译：绝对的。绝对定位属性，绝对定位会明显的改变页面布局，他会把设置了绝对定位的元素提取出来，并不会在原本的位置留下空白的空间，而是完整的浮动到另一个图层，这样原本所占据的空间就会被其它元素挤占，对页面影响会比较大。这样的效果用在按钮上会比较好，可以浮在另一个元素上使用。绝对定位是的偏移是基于最近的拥有除默认定位static属性外的父级元素进行定位，自身的父级不满足就找父级的父级，直到浏览器的body元素为止。

fixed
谷歌翻译固定的。这是看的时候觉得烦，实现功能又必须用的属性，浏览器上用到固定定位最多的就是弹窗小广告，看起来超级烦人，但是写网页往往要的就是这个效果。它是相对于浏览器窗口定位的属性，看一篇文章从头到尾你都看得到这东西，而且比较强的是这些广告往往会把实际关闭的按钮和网页上显示的按钮错位，你只要点就会进广告而不是关闭页面。

浮动
float
基本上用的就3个属性
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边

浮动不会重叠，当上一排的剩余宽度不够元素所占宽度元素就会被挤到下一排，设置浮动时宽度和高度要调整好，不然浮动的元素会把页面破坏掉，尤其是调整浏览器宽高时，解决办法很多，设置最小宽高、设置百分比宽高、或者写多个宽高，根据不同屏幕大小去切换样式。

和浮动相关的另一个属性时clear

清除，或者说禁止浮动

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

和float:none;属性不同，作用的是周围的元素而不是自身。

以上就是我对定位与浮动的学习和整理。