现在那我们来说说第二个铺垫。

第二个铺垫叫做图文混排。什么是图文混排呢，这个东西我们还需要花些时间来分析一下的。首先看下图：

其实上图就是一个例子，然而这个例子其实在我们浏览网页，或者看一些微博、博客等文章时，我们发现这种格式很常见。这种有内容、有图片并且又在一个区域中，这种情况我们就叫做图文混排。

既然说到图文混排，现在文字我们已经接触过了，但是图片该怎么弄还没说。我们现在就说说这个图片怎么弄？如果说你想让浏览器中有图片的话，那你就需要加一个<img>，其实全拼就是image，图片的意思。img是一个单标签，它是行内元素，如果只写单标签其实是没有实际含义的。因为浏览器根本不知道你要显示那张图片。所以我们需要为img添加一个src这么一个属性，src其实就是source的缩写，指的是源头。通过这个属性就可以指定图片源在哪里。

这里我们可以通过<img src=http://www.mamicode.com/“图片名称”>这种引用，就可以把图片放到浏览器里了，那么关于图片的相关知识，我们就说到这，后面我们在详细说。

我们在p标签中写一段文字，就达到了上图的一个效果。由于p标签是一个块元素，所以是不会和图片在一行的，那更别提混合在一起了。根据我们现在所学的内容，我们想要达到混合在一块的效果，那就是给p标签添加样式。

当我们给p标签添加样式之后，会按照基线排列文字，基线也就是图片的底端的部分，所以文字在书写的时候，会从底端开始排列文字。并不会从图片的顶端开始书写。那我们可能会想到在方法一种我们使用了一个叫做vertical-aling:top的。

由于图片他本身是一个行内元素，所以无论如何他也只能和一行文字摆在一起，你想跟多行在一块显示，那不可能，如果那样图片就不是行内元素了，行内元素只能在一行显示，那么其他的文字就得从图片底端下面进行展示，这样的效果并不是我们想要的。

我们需要一个真正的图文混排，图片不能局限于某一行，但我们又需要遵循block和inline的原则。

那么我们就需要开辟新战场！

那么开辟什么心战场又是我们需要解决的一个问题，我们需要通过三维的角度去观察，其实我们刚刚所看到的效果都知识三维中的一层。

但是三维中的一层，并不能满足我们的要求，那我们需要像个办法，什么办法呢，就是让这张图片在文字的基础上浮动起来，我们来看看效果。

让图片不在受一层行的局限，让图片飘起来。浮动起来之后，我们发现，一层就留下了空挡。

我们使用深红色来标识出来，流出空挡的这部分，那么有了空挡之后会发生什么事情呢，这里会发生两件事情。

第一件事是：块元素会填充空挡。

第二件事是：行内元素会绕着浮动元素的边框走。

我们对这两件事进行解释。首先我们说块元素填充空挡。那会达到一个什么样的效果呢？

发现此时背景绿色的p标签填充到图片留下来的空挡中了。那么第二件事就是行内元素环绕浮动元素边框。这个好像有点不太好理解，我们在来解释一下。大家可能会想，此时的图片已经飘起来了，那么p标签只需要占满整行就好了，那有什么行内元素环绕浮动元素边框啊。我们现在来回想一下之前说的铺垫一。p标签是块元素，但是文字是行元素。所以我们说的行内元素环绕浮动元素，意思就是图片中的文字会绕开图片的区域。就变成了这个样子。

其实这样的效果就是我们想要的了，这里我们写的文字比较少。如果多写几行就会环绕图片进行排列。例如这样！

从平面的角度看，这个就是我们需要的图文混排了。在这里我们整理一下我们这节课所涉及到的知识点。

这节内容我们主要涉及到两个方面：

1.我们说文字是行内元素。所以在标签中的内容，通属于文字类型。那么标签与文字实际上是嵌套关系。

2.我们了解了图文混排，由于图片是行内元素，当图片和文字混在一起的时候，只有图片的最顶端有文字，当然这里我们使用了vertical-align：top; 如果我们想要达到行内文字元素环绕浮动元素，就需要将图片漂浮起来，腾出来的空挡由行内元素填充，就可以达到真正意义上的图文混排。

以上就是我们这节主要涉及的内容，下一节我们将浮动腾挪应用于代码中。

静态页面制作:8HTML浮动腾挪概念(铺垫二:图文混排)