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)与定位(Position)-让盒子飞!排列方式。
下面开始让第一个飞!
在CSS中让第一个盒子向左float,为了方便观察它对邻居到底有何影响,把它的margin值改的大一点。

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

看图:

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

可以看到,当第一个盒子设置为向左浮动的时候,它影响的只是第二个盒子里面的内容,同时第一个盒子的宽度已经是按照里面的内容来定义大小了。第二个盒子会向上移动,也就是忽视第一个盒子的存在。至于它的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布局之-浮动(Float)与定位(Position)-让盒子飞!

可以看到,父层级的盒子会当它不存在,第二个和三个盒子也会当第一个盒子不存在(但里面的内容不这样认为)。
好了,现在再把第二个盒子也浮动一下,只需要改一下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;}

得到效果:

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

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

CSS布局之-浮动(Float)与定位(Position)-让盒子飞!
这里的切片宽度可以看到是10px,这样的结论和前面一篇” CSS布局之-盒子(Box)”说的是吻合的,那么上下的margin呢?我们来把浏览器的窗口变窄一点看一下:

CSS布局之-浮动(Float)与定位(Position)-让盒子飞!
现在浏览器已经变窄了,可以很明显的看到两个盒子之间的距离不只5个像素,到底是多少呢?猜10px试试,好吧,看看到底是不是:

CSS布局之-浮动(Float)与定位(Position)-让盒子飞!
果然是这样,切片的高度是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;}

得到效果:

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

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

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

再改为:clear:both

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

这里的几张图让您想起了一些东西了吗?一个简单的两列布局是不是就出现了呢?
三、 定位(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;}

为下面做参考的图:

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

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

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;}

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

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

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

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

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

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

当盒子设置了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;}

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

外面的盒子彻底失去了作用……,得出结论,设置了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;}

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

可以看到,此时里面的盒子不再以浏览器为基准进行定位了,而是以设置了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;}

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

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

Tags: absolutefloatpositionrelative定位浮动

 

 转自:http://www.skywoo.me/css-layout-float-position-let-the-boxes-fly/

上一篇:运维编排场景系列---Linux数据盘扩展分区和文件系统


下一篇:《Unity着色器和屏幕特效开发秘笈》—— 3.7 创建各向异性高光类型