注:本文章是参考千锋网学习视频总结得出。
最近在学习一个前端项目，项目中多处用到了浮动和定位。为此，通过看查找资料和看学习视频，从浮动、清除浮动、相对定位、绝对定位、总结等五个部分来谈谈我对浮动和定位的理解。
一、浮动
浮动的使用场景：一般是将竖起来的多个盒子进行横向的排列。
浮动的负面作用：因为浮动元素脱离了标准文档流，会导致父元素无法被撑开。示例如下：
1、 在body中定义2个盒子并设置盒子为右浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
border: red solid 2px;
}
.box1{
background-color: blue;
100px;
height: 80px;
float: right;
}
.box2{
background-color: yellow;
80px;
height: 60px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>
</body>
</html>
2、显示效果（由于盒子一、二进行了右浮动，使其2个盒子脱离了标准文档流，原来的大盒子就没有内容来撑他（并没有设置宽高），所以使得父盒子变成了一条红色的线）
二、清除浮动
需用清除浮动解决上面第2点出现的问题。现介绍“最流行、最常用、可兼容所有浏览器”清除浮动的一种方法。在样式文件中设置一个clear的全局属性，在需要清除浮动的“父级元素”中加上clear属性，即可清除浮动！
/*定义clear类，使用伪元素:after，并把clear类附给浮动元素的“父级元素”*/
.clear:after{display: block;clear: both;content: ".";visibility: hidden;height: 0;}
.clear{zoom: 1;}
显示效果
三、相对定位
相对于原来的位置发生改变，并且保留原有的空间位置。
相对定位有2种值改变他的位置：top left
四、绝对定位
绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有position定位，那么就找父级的父级，直到找到position定位为止，如果向上找不到position定位，那么就以最外层的body进行定位，但绝对定位不会保留原有的空间位置。
绝对定位有四种值改变他的位置：top right bottom left
五、总结
为了使页面做的绚丽生动，页面中往往会多处用到浮动，所以可使用第二点中提到的清除浮动的方法。当在进行相对定位和绝对定位时，要给对应定位的盒子加上top left等属性值，这样能更好的看出相对定位和绝对定位的区别。