浮动和定位

平常我们经常使用float这个属性，但是当你使用不当的话，就会出现很多问题，比如说：当我们把浏览器缩小页面布局就会出现混乱，很多时候就是使用float不当而造成的。如下图：
完整效果：

浏览器缩小后效果：

一、浮动

讲到浮动，我们必须要明白两个概念，那就是文档流和脱标现象。
1、文档流
页面布局的排列方式：从上至下、从左至右，一个元素占一个“坑”。

2、脱标

• 定义：脱离文档流的标准，不受文档流的约束，漂浮到漂浮层。（漂浮层只有一层）
• 产生脱标的方式：float、绝对定位（absolute）、固定定位（fixed）
  3、清除浮动
  ①overflow：hidden；这个一定要加在飘浮元素的父元素上。（最常用也是最有效的一种方式）
  ②用Clear属性
  ③给元素设置固定的宽和高

下图就是将浮动清除的效果，当屏幕缩小布局不会乱：
完整效果：

浏览器缩小后效果：

注意：如果审查元素的时候出现高度为0的情况肯定是有问题的，可以看一下是否是浮动未清除。

二、定位

css:top、right、bottom、left
1、相对定位（relative）

• 定位的元素，可以通过left、right、top、bottom这四个属性设置新的位置
• 元素移动后，原来的坑不变，也就是说它原来的位置还在那里，并没有被挤掉(元神出窍)
• 作用：界面微调 配合绝对定位来用（子绝父相，子元素用绝对定位时，父元素就要用相对定位，而且一定要设置left、top的值，这样才会有效果显示）

2、固定定位（fixed）

• 值当前元素以浏览器位置进行定位，不会以页面位置进行定位
• 特点：设置fixed后，left、top、bottom、right有效
• 脱标
• 主要应用：1、爬楼导航 2、顶部菜单冻结 3、右边的回顶部效果

3、绝对定位（absolute）

• left、top、bottom、right有效
• 当该元素设置了决定定位后，它就会向它的的父元素找看有没有设置相对定位的元素，如果有，就贴着这个父元素；若没有，就会贴浏览器。
• 脱标，该元素就不会占据那个“坑”了。
  如：

.frame2{
     width: 485px;  
     height: 200px;
     border: 1px solid black;
     margin: 50px auto;
     position: relative;
}
.frame2 .span_left{
    position: absolute;
    left: 0;
    top:110px;
}
.frame2 .span_right{
    position: absolute;
    left: 330px;
    top:110px;
}

这个左边和右边都设置了绝对定位，父元素也设置了相对定位，从效果可以看到，第一个元素的“坑”已经不存在了，被图片挤掉了，所以绝对定位会脱标，这时我们如果想要图片和文字不重合，就得对图片设置绝对定位了，设置left和top的值。

.frame2 img{
    position: absolute;
    left: 130px;
    top: 0;
}

4、static（默认）——没有定位