定位
float：left；表示向左浮动。
float：right；表示向右浮动。
position：relative;表示相对定位。
position：absolute；表示绝对定位。
position：fixed；表示固定定位
定位要用到的属性
left:54px; 表示左边距离参照54个像素
right:50px; 表示右边距离参照物50个像素
top:50px; 表示上边距离参照物50个像素
button：50px; 表示下边距离参照物50个像素
left与riught属性在用的时候任选其一
top与button属性在用的饿时候任选其一
下面就来具体解析 定位
1、浮动定位
脱离文档流 不在占据页面的空间，其他未浮动的元素会自动补齐
父元素的高度会受到影响 父元素未设定高度的时候
浮动的元素会停靠在父元素的左边或右边或者停靠在其他已经浮动的元素的边缘上
浮动元素高度不受父元素的管控，但是宽度仍然在父元素的管辖中
浮动了的元素会变成行内块元素
左浮动 元素整序排列
右浮动 元素倒序排列
浮动引发的一些特殊的效果
清除浮动带来的影响
1、使用clear属性 none 默认值 left right both
2、对于父元素的影响
2.1 直接设置父元素的高度 弊端必须要知道父元素的准
确高度
2.2 父元素也浮动 弊端 后续元素任然有影响
2.3 设置父元素的overflow 取值为hidden或auto 弊端
如果有子级内容要是溢出显示的话，也被一同隐藏了
2.4 在父元素中追加子元素 并且设置其clear的属性为
both
2.5 使用after伪类选择器追加内容
当受影响的是文本、行内元素，行内块元素时采用环绕式的方式排列 不会被浮动元素压在底
下，会巧妙的避开浮动元素
2、相对定位
position：relative; 相对定位
元素不会脱离文档流，保留原有的位置，以自身为目标做较小的偏移
适用场合：实现元素微调的时候。
用法：在其要进行调试的元素进行position属性设置
div{
position: relative;
top: 50px;
left: 50px;
}
3、绝对定位
position:absolute; 绝对定位
元素会脱离文档流，不占据页面空间，元素相对于它最近的祖先元素进行初始化位置定位。
如果该元素的上一级没有position：relative；属性则查看在上一级的元素属性，直到遇到
position：relative；然后以该元素为参照进行定位，如果一直没有position：relative；则以body标
签元素为参照进行位置定位。
绝对定位的元素会变成块级元素
用法：div{
position:absolute;
left:50px;
top:50px
}
4、固定定位
position:fixed; 固定定位
作用：一般用来固定页面可视区的某个位置，不会随着滚动而变化位置
固定定位的元素会脱离文档流
固定定位的元素会变成块级元素
固定定位永远是以body为参照定位
适用的场合：页面侧边的导航栏，回到最顶处的标志按钮
用法：
div{
position:fixed;
left:50px;
top:50px;
}
