如果你是一位前端从业者，那么你会至少一次的被提问到CSS定位的知识，CSS定位作为CSS盒模型不可或缺的一部分，在一定程度上体现出你对于层级和布局的掌握情况。以下是个人的一些总结，如有不足之处，欢迎指正！
定位：（相对于正常位置，相对于父元素，相对于另一个元素，相对于浏览器窗口）定义元素框的位置
CSS定位：为定位提供方法和属性，构建列式布局。如无特殊说明且完全按照HTML中的先后顺序进行排列的即为普通流定位；其次还有浮动、绝对定位。
CSS定位属性：
【position】(static、relative、absolute、fixed)(把元素放置在一个静态的、相对的、绝对的、固定的位置中)
【top right bottom left】 (定位元素的【上、右、下、左】外边距边界与其包含块【上、右、下、左】边界之间的偏移)
【overflow】(当前元素的内容溢出其区域时发生的事情)
【clip】(设置形状，元素被剪入该形状中显示)
【vertical-align】(元素的垂直对齐方式)
【z-index】（元素的堆叠顺序）
相对定位：
position：relative
相对于原始位置移动,效果如下图所示：
上图中可以很明确的看出，相对定位，即是相对于他的起点进行垂直和左右移动。本质上来讲，相对定位还是普通流的一种。
绝对定位：
position:absolute
相对于包含块移动，此处的包含块，可以是该元素框的父元素或者是包含该元素框的另一个元素，如下图所示：
绝对定位相对于包含块移动，原来的元素所在位置将被删除，根据包含块位置重新生成一个新的位置。
那么，如果给一个绝对定位的元素同时使用‘top’、'bottom'或者同时使用‘left’、‘right’或者同时使用四个位移属性会产生什么现象呢？
固定定位
position:fixed
相对于浏览器窗口，并且不会随着滚动条而动。
CSS浮动
纵观目前所有的CSS样式布局问题，普通流，分列，大多情况下我们都能按照普通的CSS语法和结构进行布局操作，而有一种操作，word里面较为常用【文字环绕】这种样式非浮动不能解决。故此大多情况并不需要用到浮动，那么，能不用浮动解决的，最好不要用。如果滥用，那么整个页面布局将不可控。
浮动可以左右移动，直到 外边缘碰到包含框或者另一个浮动的边框为止
浮动元素不占用空间，可创建出自然流的布局格式
清除浮动的几种方式：
1.clear：both
2.overflow：auto 给父容器设置一个高度
overflow：hidden(兼容IE6)
对父元素添加该样式，可以清除父元素内使用float所产生的浮动，该属性相当于让父级元素紧贴内容，实现清除浮动的效果
3.直接给父容器设置一个高度（需要计算算算算算算算好高度）
4.使用after伪类（另一篇文章详细介绍伪类）
具体事例此处不做列举了，相信大家在平时开发过程中遇到很多。切记，浮动要少用！
此处附上鑫大神关于CSS浮动的详细介绍，内容比较抽象，有兴趣可以看下，相信会让你对浮动有更深层的理解
网友评论