前端页面设计（CSS——定位与浮动）

前言

本文讲述了CSS中的定位与浮动是怎样来让我们的界面变得整齐和完美。这是在学习过程中的整理，如果存在问题，敬请指正。

一、定位（position）

定位的作用很明确，如果不做定位，那么，网页中所有的元素一个排一个，一行挤一行，很难做到美观。在讲述定位之前，需要先说一下“块级元素”，什么是块级元素呢，div 就是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form等

从上图可以看出，我写了三个div，标黄部分都是1号这个div块的部分，它会无限长，把整行占满，所以下一个元素只能被迫在下一行显示出来。

言归正传，position属性有四个值：static、relative、absolute、fixed

• static表示元素框正常生成，当不设置position时默认为static。
• relative表示元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
• absolute表示元素框从文档流完全删除，并相对于其他设置了position的元素进行定位
• fixed一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

1、position:relative

假设现在有三个div块

咦，如果你观察仔细，不要疑惑为什么三个div块不是上下排列，待会我会解释。现在为其中第二个div块设置position属性为relative，并设置相对上方移动20px，相对左侧移动30px，可看到效果为下图所示：

可见2号div块的原始所占的位置其实还在1和3之间，但是它本身跑到了3号上，并且覆盖了3号，画图解释一下：

2、position:absolute

当把2号div的position属性从relative改为absolute时，可看到效果为下图所示：

可见，2号原来占有的位置就被删除了，3号向前替代了2号原来的位置，2号会寻找一个被设置了position的元素进行定位。如果没找到，就相对页面左上角进行定位，1号默认和页面的左上角有一定距离，画图解释这三个框的关系如下图所示：

3、position:fixed

fixed是一个固定定位，会按照我们规定的位置，一直在此，不会随页面滑动而改变，通常逛网页里的广告都是固定定位的。它也不会保留原来占有的空间，可看到效果为下图所示：

看到现在，关于定位应该明白了吧，接下来就要解释既然div是块级元素，为什么三个框不是按最开始说的一排一排往下挤，而是排成了一排呢？看一下下面的css样式：

实际上，在定位之前，我已经通过class属性，为每一个div块设置了浮动，让它浮动起来，并且设置了border（边框）为double（双实线）border-color（边框颜色）为red（红色）。

 

接下来讲一下什么是浮动。

二、浮动（float）

1、浮动 它都干了什么？

浮动的同时，把三个块级元素后面那个无限长的行框变成了贴合元素大小的浮动框，于是才产生了三个浮动的块排在一排的情况。

2、那么什么是浮动呢

浮动有向左浮动和向右浮动，即脱离一般的文档流，像是进入三维。接下来演示一下浮动的情况：

（1）首先，分别用红蓝绿表示三个块，注意，现在div1是没有设置浮动的。

当将1号红色块设置float为left（向左浮动）时，会出现下图所示情况：

解释一下为什么重叠了？其实只是它自己的框不够用，被浮动元素的框给挤到了其他地方。之前说过，行框遇到浮动框会缩小。因为2号块的范围比1号浮动框还小，“2”这个文本在2号块内无法显示了，于是被挤到了下一行，也就是1号块下面一行

如果还是不好理解，再仔细看下面的例子：

（2）现在重新定义四个块，都没有浮动的情况下是这样的：

然后让2号蓝色块浮动起来。页面布局变成了下图这样：

现象：此时没有浮动的3号块移动到了2号块原来的位置。

解释：“3”这个文本，因为遇到了2号的浮动框，被缩短到了2的浮动框后显示，但他还在3号框的范围内。

（3）然后让3号绿色块也浮动起来，效果变成了这样：

现象：此时没有浮动的4号框移动到了原本2号的位置处，但是文本“4”被挤到了3号浮动框下面。

解释：因为4号块的范围比3号浮动框还小，“4”这个文本在4号块内无法显示了，于是被挤到了下一行，也就是3号块下面一行。

（4）为了验证说法，我把4号棕色块的长度边长一点，变得比3号还长，依然是2号和3号浮动，1号和4号不浮动，观察效果：

现象：可以看到，“4”这个文本又回到了4号块内。

至此，是不是明白了点什么？

3、对浮动位置的解释：

框1浮动，脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2。但是当所有的都浮动时，因为浮动于一个三维平面，所以排成一排，不再继续覆盖。

但是浮动框如果较大，它会自动向左排列到一个可以容下自己的位置

4、清除浮动（clear）

假设现在2号块浮动了，那么3号块移动到了2号原来的位置。如图：

所谓清除（clear），就是让3号块不认之前的浮动，阻止行框围绕浮动框，如图：

注意：尽管2号浮动了，但是3号依然把2号当做没有浮动来处理，排在了2号后面的位置。

5、实际使用浮动会遇到一个问题

实际遇到的问题就是，我们的元素通常被包裹在一个容器（容器①）内，但是如果某些元素浮动起来，那么它摆脱了文档流，这个容器就不认识浮动起来的元素了，当下一个元素来的时候，会接着容器①往下进行排列，于是页面布局会变得很难控制。

※有一个解决办法是在浮动的元素后面写一个包含clear属性的空div块，让它来把容器撑大到刚好包含所有已经浮动起来的元素。（但并不是最好的）

为了解决这个问题，我们通常选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

如果你看到了这里，希望这篇文章可以帮助你消除学习过程中关于定位与浮动的疑惑。再次表示感谢！

  文章参考：[https://www.w3school.com.cn/css/css_positioning_floating.asp](https://www.w3school.com.cn/css/css_positioning_floating.asp)