注:本文章是参考千锋网学习视频总结得出。

最近在学习一个前端项目，项目中多处用到了浮动和定位。为此，通过看查找资料和看学习视频，从浮动、清除浮动、相对定位、绝对定位、总结等五个部分来谈谈我对浮动和定位的理解。

一、浮动

浮动的使用场景：一般是将竖起来的多个盒子进行横向的排列。

浮动的负面作用：因为浮动元素脱离了标准文档流，会导致父元素无法被撑开。示例如下：

1、 在body中定义2个盒子并设置盒子为右浮动。

       
                  
     
     
      
       盒子一
      
     
      
       盒子二
      
 
     
  

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等属性值，这样能更好的看出相对定位和绝对定位的区别。