CSS布局之-浮动(Float)与定位(Position)-让盒子飞！

一、 前言：
浮动和定位的原理一定要深刻掌握！(其实每个原理都要深刻掌握！)如果你只是知道有float与position这些属性和他们的值，但是不清楚他们的值到底是怎么回事，那么你在写CSS的时候将会非常的苦恼，由刚开始的热血沸腾的想让盒子飞变成了让自己飞！因为盒子已经不知道飞到哪里去了，时间长了之后就可能会到九宵云外，盒子也找不回来了,您也可能崩溃了……
二、 浮动(Float)问题：
我们先来说说浮动问题，浮动是为了定位(这里的定位不是position).
1. 浮动对邻居有何影响？
我们先来做一下准备工作
下面是HTML中的内容：

<div class="son son1">我是第一个盒子, 此次的任务是为浮动做贡献！</div> <div class="son son2">我是第二个盒子, 是第一个盒子的搭档！</div>

下面是CSS中的内容：

body{margin:0;} .son{border:dashed 1px #990000;} .son1{background:orange;margin:5px;} .son2{background:pink;margin:5px;}

上一张图：

这里的盒子只是按照默认的排列方式。
下面开始让第一个飞！
在CSS中让第一个盒子向左float，为了方便观察它对邻居到底有何影响，把它的margin值改的大一点。

body{margin:0;} .son{border:dashed 1px #990000;} .son1{background:orange;margin:10px;} .son2{background:pink;margin:5px;}

看图：

可以看到，当第一个盒子设置为向左浮动的时候，它影响的只是第二个盒子里面的内容,同时第一个盒子的宽度已经是按照里面的内容来定义大小了。第二个盒子会向上移动，也就是忽视第一个盒子的存在。至于它的margin值怎么计算呢？我想您不会找这样的麻烦来折磨自己吧……更何况可悲的IE浏览器也有着自己独特的计算方法(我们需要的是Web标准！)……这里设置margin只是为了让您知道它的浮动只对盒子里的内容产生影响。
2. 浮动对父层级有何影响？
做好准备工作：
以下是HTML中的内容：

<div class="son son1">我是第一个盒子, 此次的任务是为浮动做贡献！ 我是第一个盒子, 此次的任务是为浮动做贡献！ 我是第一个盒子, 此次的任务是为浮动做贡献！</div> <div class="son son2">我是第二个盒子, 是第一个盒子的搭档！</div> <div class="son son3">我是第三个盒子, 我是路过的！</div>

以下是CSS中的内容：
这里只把第一个盒子设置了向左浮动

body{margin:0;} .father{margin:10px;background:skyblue;border:dashed 1px #000;} .son{border:dashed 1px #990000;margin:5px;} .son1{background:orange;float:left;} .son2{background:pink;} .son3{background:white;}

下面是效果图：

可以看到，父层级的盒子会当它不存在，第二个和三个盒子也会当第一个盒子不存在(但里面的内容不这样认为)。
好了，现在再把第二个盒子也浮动一下，只需要改一下CSS：

body{margin:0;} .father{margin:10px;background:skyblue;border:dashed 1px #000;} .son{border:dashed 1px #990000;margin:5px;} .son1{background:orange;float:left;} .son2{background:pink;float:left;} .son3{background:white;}

得到效果：

这里的margin就值得一说了，我们来看看第一个盒子与第二个盒子之间的距离是多少：

这里的切片宽度可以看到是10px,这样的结论和前面一篇” CSS布局之-盒子(Box)”说的是吻合的,那么上下的margin呢？我们来把浏览器的窗口变窄一点看一下：

现在浏览器已经变窄了，可以很明显的看到两个盒子之间的距离不只5个像素，到底是多少呢？猜10px试试,好吧，看看到底是不是：

果然是这样，切片的高度是10px，这个结论有别于以前说的上下的margin会重叠。
好了，我们现在再回到浮动的盒子对父级的影响吧,在上面的实验中看到，当设置浮动后，父级块变的相当没有权威性，在实际布局中我们绝对不想出现这样的效果，那么如何解决呢？父层级需要一个有力的帮手！请往下看。

3. 清除浮动。
还是上面的HTML，把CSS改一下：
把第三个盒子添加属性：clear:left;

body{margin:0;} .father{margin:10px;background:skyblue;border:dashed 1px #000;} .son{border:dashed 1px #990000;margin:5px;} .son1{background:orange;float:left;} .son2{background:pink;float:left;} .son3{background:white;clear:left;}

得到效果：

我们再把clear:left改为clear:right

再改为:clear:both

这里的几张图让您想起了一些东西了吗？一个简单的两列布局是不是就出现了呢？
三、 定位(Position)问题：
首先我们要知道position有哪几个属性值:static(这是默认的值，不需要考虑太多)、relative(相对定位)、absolute(绝对定位)、fixed(基于浏览器的绝对定位),这些是控制大局的东西，还有细节由什么控制呢？那就是left、top、bottom、right属性，他们的值可以用相对单位，也可以用绝对单位。
1、 relative：
准备一下代码：
以下是HTML中的内容：

<div class="father"> <div class="son">我是第一个盒子, 此次的任务是为position做贡献！</div> </div>

以下是CSS中的内容：

body{margin:0;} .father{margin:10px;background:skyblue;border:dashed 1px #000;} .son{background:pink;border:dashed 1px #990000;margin:5px;}

为下面做参考的图：

下面把这个盒子相对定位一下：

body{margin:0;} .father{margin:10px;background:skyblue;border:dashed 1px #000;} .son{ background:pink;border:dashed 1px #990000;margin:5px;position:relative;left:5px;top:5px;}

看细节图(盒子后面的幻影是盒子原来的位置)：

得出结论：relative这种定位方式是基于他本身原来的位置来定位的。从上面的图看出，盒子现在的位置距离原来的位置左边是5px,顶部是5px,对应CSS中的left:5px;top:5px;。同时还可以得出什么呢？再来看这张图：

当盒子设置了relative定位方式以后，它不会影响其它的盒子，不管是邻居还是父级层。也不管它定位到哪里。
2、 absolute：
还是上面的代码，直接把relative改为absolute，把left和top的值都改为0，总之把影响观察的东西通通去掉！

.father{background:skyblue;border:dashed 1px #000;} .son{background:pink;border:dashed 1px #990000;position:absolute;left:0;top:0;}

外面的盒子彻底失去了作用……，得出结论，设置了position属性的盒子会脱离标准进行定位，也就是说它对其它的盒子有影响，什么影响呢？就是其它的盒子会视它为空气。那么里面的盒子是以浏览器为基准进行定位的(这是不是最终结论呢？)。我们来把父层级的盒子设置一下，方便观察。

.father{background:skyblue;border:dashed 1px #000;width:200px;height:200px;margin:10px;position:relative;} .son{background:pink;border:dashed 1px #990000;position:absolute;left:0;top:0;}

可以看到，此时里面的盒子不再以浏览器为基准进行定位了，而是以设置了retalive属性的父层级的盒子进行定位了。于是可以得出结论：position定位方式元素的定位基准是距离该元素最近的且设置了非static(也就是不是默认的定位方式)属性的父级元素。好了，那么我为什么不把父级元素设置为fixed或者absolute呢？原因很简单，因为absolute和fixed的定位方式会脱离标准方式定位(近朱者赤，近墨者黑)。这里顺便把fixed也说了吧，把上面的CSS改一下：

body{margin:0;} .father{background:skyblue;border:dashed 1px #000;width:200px;height:200px;margin:10px;position:relative;} .son{background:pink;border:dashed 1px #990000;position:fixed;left:0;top:0;}

可以看到，fixed不管父层级是如何定位的，始终以浏览器为基准进行定位。
好了，说的够多了，再说下去，右边的滚动条越来越小了，不过也没有多少东西要说了，更多的细节，您在做的时候多多注意……。